Webfont as Fallback for local font

Question

I've a question about webfonts and how they get loaded. The thing is, I have to use the Calibri font. It's a regular windows font.

So the font stack could be something like:

font-family: Calibri, Candara, Arial, sans-serif;

However there is a webfont of Calibri but it's pretty pricey. So my idea was to build the font stack like this:

font-family: Calibri, 'Calibri', Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

So the first font should be the local one and the second the webfont. So if the local one is not found, it loads the webfont.

The font is priced for xxx views. The question is, would this work and if so would this save me some font loads?

Calibri is pretty pricey?? This font is a safe webfont and is part of the modern OS - You can have them locally to force the use — Luís P. A., Sep 24 '15 at 08:44
Only on windows os. At least I don't have them on my mac. Client said something about 99$ / 250k views. — Jakub Juszczak, Sep 24 '15 at 08:47
Most Modern MAC´s have this font. Why you don´t save the font locally using http://www.fontsquirrel.com/tools/webfont-generator ... Keep it simple. — Luís P. A., Sep 24 '15 at 08:52
weird. i have a mbp 2015. and dont have it. well but I found calibri on myfonts as a webfont download... so I don't know where the client found this 99 $ / 250k views hosted fonts. I guess this will do the trick. — Jakub Juszczak, Sep 24 '15 at 08:54

score 2 · Accepted Answer · edited May 23 '17 at 11:44

Unfortunately this isn't how CSS works. In order to implement the webfont you'd first need to include it in your website (via HTML <link>, CSS @import or through JavaScript).

This means that prior to your font-family declaration, the font will have already been loaded (and presumably counted as a view by the company who hosts the font).

One solution could be to detect whether the browser is able to load the Calibri font by default (using JavaScript), and if not then download the webfont and use that instead, but in doing this you'd create a strage user experience whereby the page would default to using a font that could be loaded and then after a short while change to the webfont (after JavaScript has loaded it and your CSS has kicked in).

If you are willing to go down that path, there are several topics about how to detect which font has been loaded through JavaScript, such as Detecting which font was used in a web page

Yeah I thought that @import would count as a view :/ But thanks for clarifying that. — Jakub Juszczak, Sep 24 '15 at 08:50

score 0 · Answer 2 · answered Jan 07 '22 at 11:53

The way to use a web-font as a fallback for a local font is to make an alias using your @font-face rule:

@font-face {
  font-family: Calibri;
  src: local(Calibri),
       url(Calibri.woff) format("woff");
}

font-family: Calibri, Candara, Arial, sans-serif;

This method is preferable to giving the web-font a different name and including both in your font stack, which can sometimes result in the web-font being downloaded when it's not needed. By moving both to the @font-face rule, the web-font will not be downloaded if a local installation of Calibri is found on the user's system.

(I know your original question entailed other complications, with the web-font being hosted at a different domain and charged per view. I figure these are secondary though to the title and fundamental question of using a 'Webfont as Fallback for local font'.)

score 0 · Answer 3 · answered Jan 07 '22 at 12:17

For saving font loading, you can also use a service worker to cache fonts or return the specified font file. It can intercept the loading of fonts and return a customized response. You can use the workbox to make it easier to cache font files. The following is an example of caching Google fonts

  import {ExpirationPlugin} from 'workbox-expiration';
  import {registerRoute} from 'workbox-routing';
  import {StaleWhileRevalidate} from 'workbox-strategies';

  // Cache Google Fonts with a stale-while-revalidate strategy, with
  // a maximum number of entries.
  registerRoute(
    ({url}) => url.origin === 'https://fonts.googleapis.com' ||
               url.origin === 'https://fonts.gstatic.com',
    new StaleWhileRevalidate({
      cacheName: 'google-fonts',
      plugins: [
        new ExpirationPlugin({maxEntries: 20}),
      ],
    }),
  );

Webfont as Fallback for local font

3 Answers3