Home/ Questions/Q 7403885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:10:30+00:00

sometimes web-fonts don’t load (for instance if hosted on google fonts) and fallbacks may

  • 0

sometimes web-fonts don’t load (for instance if hosted on google fonts)
and fallbacks may need special treatment, because they can be consistently different from other specified fonts

for instance:

font-family:'webfontname', 'winfont', 'linuxfont', sans-serif;

now the webfont should have

letter-spacing:2px;

but winfont should have

letter-spacing:-4px;

how can I manage this?

thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re using Google Web Fonts, so I suggest using the WebFont Loader, which will allow you to, for example, apply different CSS depending on whether the font is loading or loaded.

    Here’s a minimal example based on the code from my second link:

    http://jsbin.com/izadif/ (spam refresh to see it)

    <!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-loading h1 {
        font-family: serif;
        font-size: 16px;
        color: red;
        letter-spacing: 20px;
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px;
        letter-spacing: 2px;
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
  </body>
</html>
    • 0