CODEWITHSUNDEEP
fontsfont-face
user1508711
user1508711

Reputation: 57

@font-face chrome rendering

I was wondering if somebody else have had this problem - @font-face fonts are not rendering correctly in Chrome, well sometimes they do, sometimes don't, which is actually the problem because I can't track what's wrong on my own. In other browsers everything is fine. I am using Icomoon fonts and their syntax: 

@font-face {
    font-family: 'entypo';
    src:url('/fonts/entypo.eot');
    src:url('/fonts/entypo.eot?#iefix') format('embedded-opentype'),
        url('/fonts/entypo.svg#entypo') format('svg'),
        url('/fonts/entypo.woff') format('woff'),
        url('/fonts/entypo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: 'entypo';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'entypo';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    line-height:1;
}

.htaccess in the fonts folder: 

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

root .htaccess has the same rules.

So I don't know what else can be wrong and is messing with my fonts. Thank you very much for your help!

Upvotes: 2

Views: 1779

Answers (3)

HeyHeyJC
HeyHeyJC

Reputation: 2897

Old question, but the same problems/bugs do tend to persist with Chrome...

This may be helpful for some. I was getting blank print preview and prints from Chrome with @font-face specified fonts, though other browsers worked perfectly.

Turns out it works fine when NOT served from localhost, but from my actual server.

Wish I tried that many, many hours ago.

Upvotes: 0

Stan
Stan

Reputation: 85

There is a known issue in Windows Chrome where it does not render Private Use Area unicode characters.

If you have text-rendering: optimizeLegibility; in your project, set text-rendering: auto; for the icons class and they should render in Windows Chrome.

Upvotes: 1

PatomaS
PatomaS

Reputation: 1603

It seems that chrome has some issues with rendering fonts, at least with some rules, you can check this post for some tips how to improve you situation and this page from typekit to understand a bit better the process.

Bye

Upvotes: 0

Related Questions