Css – Chrome not rendering @font-face ttf/woff smooth

cssfont-faceiconssmooth

I am using the IconMoon @font-face icon font for a project I'm working on.

The font is nice and smoothly rendered when only including the .svg and/or .eot font, or when browsing with other browsers such as IE9. But when browsing the site with Chrome, and including the .ttf and/or .woff format, the icons become very choppy and no anti-aliasing at all. Is there a way to tell Chrome to load the .eot or .svg instead of .ttf or .woff?

Best Answer

I found this works for that issue. I don't think the font-smooth solution actually works.
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: url('fonts/montserrat-regular-webfont.eot'); /* IE9 Compat Modes */
   src: url('fonts/montserrat-regular-webfont.eot?iefix') format('eot'), 
       url('fonts/montserrat-regular-webfont.ttf')  format('truetype'), 
       url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'),
       url('fonts/montserrat-regular-webfont.woff') format('woff'); 
}
Firefox will pick the last one in the list (woff), working or not, IE will use eot, and Chrome will pick the first one that works (svg). Woff works too in chrome, but causes aliased glyphs, so putting svg ahead of woff solves that.*

This solution works, but causes an extra request in Safari, you could leave your svg below woff like you did originally and add:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'OpenSansLightItalic';
    src: url('fonts/montserrat-regular-webfont.svg#montserratregular')  format('svg');
  }
}

Read about it here: http://hollisterdesign.wordpress.com/2014/04/29/note-to-self-always-use-this-fix/

Related Solutions

Css – How to remove the border highlight on an input text element

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

Keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused.

CSS @font-face not working with Firefox, but working with Chrome and IE

LOCALLY RUNNING THE SITE (`file:///`)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here