2

Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser. Deleting the corresponding font from my windows font folder corrected the difference.

My question is how preventing this possibility when designing css fonts on a website

Matoeil
  • 6,851
  • 11
  • 54
  • 77

2 Answers2

2

Most @font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).

Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.

Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer

Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:

@font-face {
    font-family: 'Gudea';
    src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
    src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
         url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
         url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
         url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
Community
  • 1
  • 1
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • what if local() is not used but all format are not added ? – Matoeil Mar 16 '16 at 10:53
  • 1
    Some browsers won't donwload anything because none of the formats are compatible and this font won't be used. Next font will be used in your declaration `font-family: your-font,something-else,a-websafe-one,sans-serif;`, that's all (the ultimate default if you don't write sans-serif is serif i.e. Times most of the...times). **[Descriptions of formats on SO](http://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face)** . Using Icomoon or Fontsquirrel services is a time-saver. – FelipeAls Mar 16 '16 at 11:01
1
  • Download the font .ttf
  • Saving the font in a folder in your web site

  • For call font use this code in css:

    @font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}

.example{
font-family: YourFont, sans-serif;
}