Search code examples
cssfontswebfonts

Are browsers making request on unused fonts included by @font-face?

Question

Are browsers making requests and downloading all the files specified by @font-face declarations or only the ones which are referenced throughout the stylesheets?

Example

Let's say I have 3 @font-face declarations:

@font-face {
  font-family: 'A';
  src: url('http://fonts.com/font-a.woff2') format('woff2');
}

@font-face {
  font-family: 'B';
  src: url('http://fonts.com/font-b.woff2') format('woff2');
}

@font-face {
  font-family: 'C';
  src: url('http://fonts.com/font-c.woff2') format('woff2');
}

And then all my styles are:

body {
  font-family: 'A';
}

h1 {
  font-family: 'B';
}

Will font C be requested by the browser or not? Is it standardised somewhere in the specification?

Solution

  • Yes - unused fonts are requested on some old browsers, e.g. IE8 and older.

    How ever, almost all modern browsers today do not make additional requests for unused imports. https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/

    Consider importing these fonts from Google, Lato, Roboto and Raleway

    @font-face {
 font-family: 'A';
 src: url('https://fonts.googleapis.com/css?family=Lato');
}

@font-face {
  font-family: 'B';
  src: url('https://fonts.googleapis.com/css?family=Roboto');
}

@font-face {
  font-family: 'C';
  src: url('https://fonts.googleapis.com/css?family=Raleway');
}

body {
  font-family: 'A';
}

h1 {
  font-family: 'B';
}

    And with the following HTML markup

    <body>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolar sit amet</p>
</body>

    You can inspect the requests made by the browser in the developer tool, e.g. in Google Chrome, press F12 and open the network tab.

    Requests by browser

    Notice that only Roboto and Lato were requested, although Raleway was imported in the CSS file.