CODEWITHSUNDEEP
cssfontsfont-facewebfonts
Jakub Juszczak
Jakub Juszczak

Reputation: 7827

Webfont as Fallback for local font

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?

Upvotes: 2

Views: 1338

Answers (3)

KnownRock J
KnownRock J

Reputation: 136

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}),
      ],
    }),
  );

Upvotes: 0

Kal
Kal

Reputation: 2664

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'.)

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

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

Upvotes: 2

Related Questions