Why would I need to import a font to my website?

Sometimes the design team sends you an awesome mockup for a brand new - great looking app, so you need to put all your coding skills to work to make this idea become reality. You know the ins and outs of HTML5 and CSS3, but...

Do you know how to do it the right way?

There was this time I was helping a team of developers to get up and running a bunch of sites, we had the designer's work done, the application was running smoothly on my computer, but then when I started building those pages, I noticed there were a lot of different font-family values which didn’t make any sense to me because it was about the same font just with different variations in weight and style. I realized we maybe had made a mess in our CSS, so we needed to fix it out the right way.

How to import fonts the right way?

First of all, we need to learn that the way of importing a font into a website is through CSS, this allows us to load fonts to the webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then it displays the font as specified in the CSS.

Without the rule, our designs are limited to the fonts that are already loaded on the user's computer, which may vary depending on the system we are using.

@font-face Rule

@font-face {
  font-family: <remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

Where

Font-family: Specifies a name that will be used as the font face value for font properties.
Src: Specifies the source containing the font data. This can be an URL to a remote font file location or the name of a font on the user's computer.

Font-weight: specifies the weight (or boldness) of the font. The font weights available depend on the font-family you are using. Some fonts are only available in normal and bold.

Font-style: Specifies whether a font should be styled with a normal, italic, or oblique face from its font-family.

Example:

@font-face {
  font-family: 'Proxima Nova';
  src: url('ProximaNova.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

And then you can include that font in a CSS Rule:

body {
  font-family: 'Proxima Nova', Fallback, sans-serif;
}

Important note: The @font-face should be added before any CSS rules.

Browser support

If you are concerned about how many browsers will display your new font, you ought to grab a lot of formats for the same font. The following is a great example of a deep browser support:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

There are more practical cases when you’re probably going to get enough support with a couple of sources like this:

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Using @import

While @font-face is excellent for fonts that are hosted on our own servers, there may be situations where an online hosted font solution would be better.

@import url(//fonts.googleapis.com/css?family=Open+Sans);

A benefit of using an online hosted service is that this may include all the font file variations; it ensures deep cross-browser compatibility without having to host all those files ourselves.

Importing with multiple font-weights and styles

This is the most important step where you really should do it the right way, most of the times you will find yourself with a bunch of different files; something like this:

Regardless your application’s architecture, you need to import the files at some point from the CSS. You should take care of importing all those files correctly, before setting up rules.
Inside your application, use @font-face

  @font-face {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    src: local('ProximaNova-Regular'),
    local('Proxima Nova Regular'),
    url('proximanova-webfont.woff2') format('woff2'),
    url('proximanova-webfont.woff') format('woff');
  }

  @font-face {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 500;
    src: local('Proxima Nova Semibold'),
    local('ProximaNova-Semibold'),
    url('proximanova_medium-webfont.woff2') format('woff2'),
    url('proximanova_medium-webfont.woff') format('woff');
  }

  @font-face {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 300;
    src: local('Proxima Nova Light'),
    local('ProximaNova-Light'),
    url('proximanova_light-webfont.woff2') format('woff2'),
    url('proximanova_light-webfont.woff') format('woff');
  }

You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.

The local part inside src checks if the font is in the user’s system first.

As you can see from the code above, we are importing two different files for each one of the variations, all are for Proxima Nova font, normal style, but different font-weight, how do we know this? Easy, usually the filename should tell us which weight the file has, let’s dive deep into this.

Understanding font-weight

The font-weight property accepts either a keyword value or a predefined numeric value. The available keywords are:

• normal
• bold
• bolder
• lighter

The available numeric values are:

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900

You should consider:

The keyword value normal maps to the numeric value 400 and the value bold maps to 700.
The keyword values: bolder and lighter are relative to the computed font-weight of the parent element.
The browser will look for the closest bolder or lighter weight, depending on what is available in the font-family, otherwise it will simply choose 400 or 700, depending on which makes the most sense.

See the beauty

Now you can just change the weight and style as needed without changing the font-family every time:

body {
  font-family: "Proxima Nova", sans-serif;
  font-size: 16px;
}

h1 {
  font-size: 32px;
  font-weight: 500;
}

.bold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

In conclusion, we should try to avoid making a mess inside our application CSS, specially with values like fonts which are recurrent along the whole application because one refactor could mean building the entire CSS files again. Try to stick to a convention if this way is not the best option for you, just build the simple rules as possible and try to use SASS or LESS to give more power to your stylesheets.

Thanks for reading!