Reputation: 207
I used font-squirrel to embed a font onto a site (with Apply Hinting selected), and it's not rendering properly in Chrome v15.0 for PC. The font shows, but poorly. I'm sure that font-squirrel gave me the right code, so I assume there is a conflict in my CSS. Thanks in advance for your help.
@font-face {
font-family: 'RockwellStd-Light';
src: url('rockwellstdlight-webfont.eot');
src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'),
url('rockwellstdlight-webfont.woff') format('woff'),
url('rockwellstdlight-webfont.ttf') format('truetype'),
url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg');
font-weight: lighter;
font-style: normal;
}
h1 {
font-family:'RockwellStd-Light', Helvetica, Ariel;
font-size:34px;
color:#407d3b;
font-weight:lighter;
margin-left:20px;
}
h2 {
font-family:'RockwellStd-Light', Helvetica, Ariel;
font-size:32px;
color:#ece1af;
font-weight:lighter;
line-height:42px;
}
h3 {
font-family:'RockwellStd-Light', Helvetica, Ariel;
font-size:20px;
color:#FFF;
font-weight:lighter;
}
p {
font-family:'RockwellStd-Light', Helvetica, Ariel;
font-size:14px;
line-height:17px;
color:#333;
text-align:justify;
}
.criteria_table {
font-family:'RockwellStd-Light', Helvetica, Ariel;
font-size:14px;
color:#FFF;
}
Upvotes: 7
Views: 8699
Reputation: 6857
As hisnameisjimmy already pointed out, the solution is to use SVG fonts, which are always rendered with anti-aliasing, but this also has some drawbacks:
font-weight:bold;
or font-style:italic;
has no effect.However, at least the first problem can be solved by using SVG fonts only if font-smoothing is actually disabled. There's a nice post at User Agent Man on how to detect font-smooting, which I used to create a little script (~600 bytes), which automatically updates your font-face CSS if font smoothing is disabled.
You can find my Font Smoothie script at GitHub'S GIST and all you have to do is to add the following line anywhere in your page:
<script src="fontsmoothie.min.js" type="text/javascript"></script>
However, you also need a well hinted font to get nice looking glyphs. Luckly there's a way to add some automatically generated hinting to a ttf-font using ttfautohint and you can then use Font Squirrel to generate the web-fonts. The whole process is a bit tricky so I wrote an article on how to create web-fonts on Pixels|Bytes, which explains how to add hinting to a font and how to use my Font Smoothie script. Hope this helps :)
PS: I'm aware that linking to my own blog won't be appreciated here, but I think my post describes a good solution to the problem, so I posted it anyway. Please leave a comment if you want me to remove the link and I'll do so.
Upvotes: 2
Reputation: 1548
https://stackoverflow.com/a/9041280/1112665
For @font-face delivered fonts, the fix is to put the svg file right below .eot but above .woff and .ttf
From this:
@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’),
url(‘webfont.svg#svgFontName’) format(‘svg’);
}
To this:
@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
Examples of this fix can be seen here:
FontSpring Examples
Adtrak Examples
Upvotes: 8
Reputation: 51
I'm sorry guyes, but this doesn't work anymore in Chrome 16.
Similiar topic is here: @font-face anti-aliasing on windows and mac
And I wrote about it on Google Chrome Forum here, waiting for reactions now: http://www.google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=en
Upvotes: 2
Reputation: 25783
You can specify text-shadow:
text-shadow: 0 0 1px rgba(0, 0, 0, .01);
When using custom fonts, to make them render better in google chrome. It forces Chrome to use an alternative rendering path. Please note that this will increase CPU load on the end users machine.
Upvotes: 3