CODEWITHSUNDEEP
browsergoogle-chrome-devtoolsfont-facewebfontsfirefox-developer-tools
Ham
Ham

Reputation: 11

Newer versions of Firefox, Chromium wont load webfont, if font is installed locally?

I noticed in the dev tools network pane, that my font files are not showing up. (Roboto) Fonts are used only as local files in a webserver folder, embedded with css @font-face as eot, woff2, woff, ttf and svg.

Firefox showed those webfont in the log last week but not anymore in Version 107.

I tried chomium, saw font files loading in Chromium 70, updated to Chromium 110: gone from the network log. I found Roboto installed in my Windows / fonts, removed it and now both new browsers load webfonts again. This behaviour is reversible. Going back to older browser versions will load all font-face webfonts, regardless which one is installed.

What did i miss?

Thanks <3

Upvotes: 0

Views: 283

Answers (1)

Ham
Ham

Reputation: 11

The CSS file was from 2018 using @font-face generated by the google webfonts helper: https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin It seems that nowadays the "src:local" option is left empty to prevent this conflict. (still strange why this a thing now but wasnt last week)

2018: "src: local" with fontnames => Installed System Font is used.

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
        url('fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

2022: "src: local" is empty => webfont will always be loaded

    /* roboto-regular - latin */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
        src: local(''),
             url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
             url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
             url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
             url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
    }

Upvotes: 0

Related Questions