CSS: using only a single font family and different styles with web fonts: a lesson from Google

  • CSS
  • Gabriele Romanato

I was wondering how Google handles its web fonts so that you don't have to specify a different font family for bold and italic styles but you can simply use the main family. To answer my question, I've simply opened the URL of the Google's CSS file.

The linked CSS file looks like this (retrieved with Chrome):


@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Serif'), local('DroidSerif'), url(file.woff) format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(file.woff) format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url(file.woff) format('woff');
}

As you can see, the font-family property is always the same. Instead, the font-style and font-weight properties change depending on the style of the font (bold or italic) together with the corresponding local file.

Knowing this, I ran a simple test with a web font downloaded from Font Squirrel. Font Squirrel doesn't follow the Google's approach but it specifies a different font family for each style:


@font-face {
    font-family: 'Linux Libertine'; /* normal */
    src: url('LinLibertine_R-webfont.eot');
    src: url('LinLibertine_R-webfont.eot?#iefix') format('embedded-opentype'),
         url('LinLibertine_R-webfont.woff') format('woff'),
         url('LinLibertine_R-webfont.ttf') format('truetype'),
         url('LinLibertine_R-webfont.svg#LinuxLibertineORegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Linux Libertine'; /* italic */
    src: url('LinLibertine_RI-webfont.eot');
    src: url('LinLibertine_RI-webfont.eot?#iefix') format('embedded-opentype'),
         url('LinLibertine_RI-webfont.woff') format('woff'),
         url('LinLibertine_RI-webfont.ttf') format('truetype'),
         url('LinLibertine_RI-webfont.svg#LinuxLibertineOItalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Linux Libertine'; /* bold */
    src: url('LinLibertine_RB-webfont.eot');
    src: url('LinLibertine_RB-webfont.eot?#iefix') format('embedded-opentype'),
         url('LinLibertine_RB-webfont.woff') format('woff'),
         url('LinLibertine_RB-webfont.ttf') format('truetype'),
         url('LinLibertine_RB-webfont.svg#LinuxLibertineOBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

By doing this, now you can simply specify the main font family on the body element and your browser will render the correct font style when you use the font-style or font-weight properties.

These styles will also be applied to common HTML elements, such as em or strong (using the default user-agent stylesheet). Thank you Google!

Back to top