@Font Face Choppy Font in Chrome

@font face choppy font in Chrome

After many hours of looking for a fix I found a perfect fix. It costs an annual fee, however if you are a web designer with multiple sites this is a must have!

www.typekit.com

It works on ALL modern browsers and it fixes my pesky problem with Chrome so I'm happy. It's worth the small fee to have great type no matter what your visitor is viewing on. Start to have an issue, contact them and THEY fix it for you. Peace of mind for almost any typeface.

@font-face for custom fonts, fonts not smooth in Chrome

This is a known issue that Chrome devs are fixing:

http://code.google.com/p/chromium/issues/detail?id=137692

To work around until then first try:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

If this does not work for you, this work-around worked for me (above did not fix windows Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

it appears rearranging the @font-face CSS rule to allow svg's to appear 'first' fixes this problem.

example:

-before--------------

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

-after--------------

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

@font-face on Chrome 16 in Windows 7 looks like something ate parts of it

It's because the font is missing hinting, as already noted. Mac OS always strips away the hinting data anyway, as its rasterizer "auto-hints" the font itself.

However, there is a great little software which uses the automatic hinting of FreeType and embeds the data into the file, i.e. it auto-hints the font for you.

See here: http://www.freetype.org/ttfautohint/

Why does this Slow network detected... log appear in Chrome?

This means the network is slow, and Chrome is replacing a web font (loaded with a @font-face rule) with a local fallback.

By default, the text rendered with a web font is invisible until the font is downloaded (“flash of invisible text”). With this change, the user on a slow network could start reading right when the content is loaded instead of looking into the empty page for several seconds.

• Related Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=578029. (A change enabling this behavior for 3G connections landed in September; this should be the reason you got the message.)
• Related source code: https://chromium.googlesource.com/chromium/src/third_party/+/master/WebKit/Source/core/css/RemoteFontFaceSource.cpp#74

@font-face svg not working properly in Chrome?

To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:

@font-face {
    font-family: 'Futura';
    src: url('futura.eot');
    src: url('futura.eot?#iefix') format('embedded-opentype'),
         url('futura.woff') format('woff'),
         url('futura.ttf') format('truetype'),
         url('futura.svg#futura') format('svg');

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Futura';
        src: url('futura.svg#futura') format('svg');
    }
}

Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.

Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration

<font-face units-per-em="2048" ascent="1900" descent="-510" />

You can change the value for ascent and get it to match the other font format versions.

Google chrome does not apply font-face to parts of text

I found out   caused this problem.

---

Related Topics