0

I've looked up on the internet and on Stack Overflow as well, but even if many have covered this topic I'm not sure how to effectively do it.

My intention is to use CSS3 font-face with the maximum compatibility range as possible, checking if the webfont used is already installed on the device. Then, if it is, make the browser use that instead of downloading it.

This is my attempt, that of course is not working as expected. For instance Firefox downloads the woff2 version of my webfont.

@font-face{
    font-family: mplus-1c;
    src: local('M+ 1c regular'),
        local ('mplus-1c-regular');
    src: url('../fonts/mplus-1c-regular-webfont.eot');
    src: url('../fonts/mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/mplus-1c-regular-webfont.woff2') format('woff2'),
        url('../fonts/mplus-1c-regular-webfont.woff') format('woff'),
        url('../fonts/mplus-1c-regular-webfont.ttf') format('truetype'),
        url('../fonts/mplus-1c-regular-webfont.svg#m_1cregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
  • The browser uses only one `src` property, so it will ignore the first two in your example. Combine them instead: use `src: local(font), url(webfont);`. See also [@font-face src: local - How to use the local font if the user already has it?](https://stackoverflow.com/q/3837249/1016716) – Mr Lister Oct 18 '17 at 10:07
  • Isn't that going to mess things up with the ?#iefix part? –  Oct 18 '17 at 10:14
  • I'm not that well versed in the pitfalls of all different IE variants, but if you want to make sure it works, I'd suggest putting the #iefixed one first, followed by local and the newer formats. Then old IE will load the eot even if the local font exists, but at least it won't break. – Mr Lister Oct 18 '17 at 12:02
  • Unfortunately it's not working. I got this error: downloadable font: rejected by sanitizer (font-family: "mplus-1c" style:normal weight:normal stretch:normal src index:0) source: http://localhost/luciolepri-dpcolorist/fonts/mplus-1c-regular-webfont.eot This way the browser seems to download only the .eot one, which is not supported by Firefox and others. –  Oct 19 '17 at 07:41

1 Answers1

0

Mr Lister is absolutely right! Moreover I found a very stupid syntax error that prevented his suggestion from working:

local ('mplus-1c-regular');

should have been

local('mplus-1c-regular');

Silly me.

Thank you again, Mr Lister! To sum' this up, here's the correct code:

@font-face{
    font-family: mplus-1c;
    src: url('../fonts/mplus-1c-regular-webfont.eot');
    src: url('../fonts/mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'),
        local('M+ 1c regular'),
        local('mplus-1c-regular'),
        url('../fonts/mplus-1c-regular-webfont.woff2') format('woff2'),
        url('../fonts/mplus-1c-regular-webfont.woff') format('woff'),
        url('../fonts/mplus-1c-regular-webfont.ttf') format('truetype'),
        url('../fonts/mplus-1c-regular-webfont.svg#m_1cregular') format('svg');
    font-weight: normal;
    font-style: normal;
}