Fonts, the oft-forgotten element of design. While most people don’t think twice about it, some people have shaped entire careers surrounding fonts. Although many eCommerce platforms allow font choices, what we have less control over, especially in the coding of the site, is the font style. The use of italics, bold, narrow, underline, strike through, can give your website a whole new level of depth that one static font just can’t. It can show emphasis without changing font size, you can draw the eye around the page, you can do so much… but how? I’ll explain!

Let’s start with the background information. The CSS @font-face rule is what we use to take web font files and add them to our CSS so that we can apply the fonts to text on the page. Normally each @font-face rule only relates to a single font style, but what we are going to dive into here is how we can use multiple different font files for each variation (light, regular, bold, italic etc) inside a single @font-face declaration. It makes it a LOT easier to reference these styles when writing the CSS.

Let’s take this scenario into consideration. We have a collection of font files that we want to use on our site.

In this case, we’re using the Montserrat font and we’ve got the regular font, as well as light, bold and italic styles. We will use the standard @font-face CSS rule to add the files to our stylesheet so that we can apply them to elements on our site. So we add this rule for the regular font style

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Regular.eot?#iefix') format('embedded-opentype'), 
         url('Montserrat-Regular.woff') format('woff'), 
         url('Montserrat-Regular.ttf')  format('truetype'),
         url('Montserrat-Regular.svg#Montserrat') format('svg');
}

Which is perfect for this single regular style of the font. 

But... how do we also add the files needed for the light, bold and italic styles of the font? One way is to add the same CSS rule again for each style, changing the font-family and url values for each font file. But that would mean when we want to use the light, bold or italic styles of the font in our CSS we would need to declare the font-family value for it like this

.text { font-family: 'Montserrat Bold'; } 

Which is quite tedious and really not an intuitive way to do it when ordinarily you would do this to apply a bold style...

.text { font-weight: bold; } 

So if that isn’t the most efficient way, how can we take a bunch of different web font files and utilize them like a single font? The solution is to declare all styles with the same font-family value and declare each font style and weight we want to use, like this...

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Regular.eot?#iefix') format('embedded-opentype'), 
         url('Montserrat-Regular.woff') format('woff'), 
         url('Montserrat-Regular.ttf')  format('truetype'),
         url('Montserrat-Regular.svg#Montserrat') format('svg');

}
@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Light.eot?#iefix') format('embedded-opentype'), 
         url('Montserrat-Light.woff') format('woff'), 
         url('Montserrat-Light.ttf')  format('truetype'),
         url('Montserrat-Light.svg#Montserrat') format('svg');
    font-weight: lighter;
}
@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Bold.eot?#iefix') format('embedded-opentype'), 
         url('Montserrat-Bold.woff') format('woff'), 
         url('Montserrat-Bold.ttf')  format('truetype'),
         url('Montserrat-Bold.svg#Montserrat') format('svg');
    font-weight: bold;
}
@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Italic.eot?#iefix') format('embedded-opentype'), 
         url('Montserrat-Italic.woff') format('woff'), 
         url('Montserrat-Italic.ttf')  format('truetype'),
         url('Montserrat-Italic.svg#Montserrat') format('svg');
    font-style: italic;
}

Using this approach, we can now apply the Montserrat font to our page, and then apply the font’s weight and styles the conventional way like this

body { font-family: 'Montserrat'; }
p { font-weight: lighter; }
h1 { font-weight: bold; }
blockquote { font-style: italic; } 

And thanks to our clever CSS above, it knows which font file to apply to each style.

There you have it! Get creative! Vary it up! Express yourself! All in an easy and manageable way.