CODEWITHSUNDEEP
cssiconsfont-face
BobSacamano
BobSacamano

Reputation: 148

Browser sometimes uses the wrong font to render icons, resulting in garbled text

I'm having an intermittent problem with Chrome not rendering the correct fonts to display icons.

I'm using icomoon.io to create a custom set of icons as a font, and I'm using the following css (auto-generated by icomoon) to display those custom icons.

@font-face {
    font-family: 'eIconFont';
    src: url('fonts/eIconFontV3.eot?kmqo7q');
    src: url('fonts/eIconFontV3.eot?kmqo7q#iefix') format('embedded-opentype'), url('fonts/eIconFontV3.woff2?kmqo7q') format('woff2'), url('fonts/eIconFontV3.ttf?kmqo7q') format('truetype'), url('fonts/eIconFontV3.woff?kmqo7q') format('woff'), url('fonts/eIconFontV3.svg?kmqo7q#eIconFontV3') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="eIcon-"], [class*=" eIcon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'eIconFont' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.eIcon-support:before {
    content: "\e93b";
}
.eIcon-collapse:before {
    content: "\e935";
}
.eIcon-expand:before {
    content: "\e936";
}

The html looks like this:

<span class="eIcon-support" title="Support">
    ::before
</span>

The result looks something like this:

enter image description here

Looking at Chrome dev tools, I can see that the font files themselves are loading fine from our CDN, but I have noticed that under Elements > Computed > Rendered Fonts it says Times New Roman, when the value is usually eIconFontV3. It's odd that the browser is trying to use Times New Roman, when the font-family set on the body is 'Gotham Light', Arial, sans-serif.

This bug only happens rarely, and is pretty hard to reproduce.

Upvotes: 8

Views: 1420

Answers (1)

Tintin
Tintin

Reputation: 31

I also ran into the problem. If you use sass and cause the problem, maybe the bellow detail will help you.

I use sass to compile SCSS files to CSS files, and I found sass convert the escape string(e.g. \E91E, hex 5C45393145 ) to the real utf-8 value(, hex EEA49E), but the node-sass doesn't do that. And the conversion causes the text to garbled sometimes when using Chrome. Here has more detail about the issue.

My temporary solution is to use node-sass instead of sass to compile SCSS files.

Upvotes: 3

Related Questions