If you’re on a windows machine using Google Chrome, you may have noticed your fonts might not have been rendering as crisply as you would like.
As you can see with the screenshot above: the edges are jagged, font isn’t smooth and inconsistencies in the font weights.
Unfortunately, this is known issue, and has been for quite some time on the Chromium development forum (Issue 25541: DirectWrite support).
Pure CSS Solution
A quick workaround is to serve SVG fonts.
Assuming you already have your CSS from Font Squirrel or somewhere similar, it should look something like this:
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.eot');
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype'),
url('fonts/myfont.svg#myfont') format('svg');
font-weight: normal;
font-style: normal;
}All you need to do is add the following after the initial font-face declaration:
/*FIX FONT FOR GOOGLE CHROME ON WINDOWS*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.svg#myfont') format('svg');
font-weight: normal;
font-style: normal;}
}This rule will only apply to browsers that are built on webkit (Safari and Chrome) and override the previous declaration.
While the media query works just fine, it also applies it to Google Chrome for Mac, Safari and iOS browsers. These browsers render fonts just fine but let’s be honest, the rendering of SVG fonts is usually no-ones first choice.
Alternative options
The SVG solution worked a charm in Windows Google Chrome. But then the quality of the SVG font rendered in Google Chrome for Mac was worse than what it was prior to the override. And so the cascading effect continued (pun intended).
However, I found it was best to simply target the browser and OS that had the initial issue. Unfortunately, you can’t target browsers or operating systems with pure CSS, so we can only achieve this with either our server side language or javascript. Quick solutions are outlined below for both methods.
Using HTTP headers
Assuming you have server-side access, this method detects the user agent string and serves an additional css file (or inline CSS) containing the SVG font rules.
The standard user agent string for Windows Google Chrome is:
Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1667.0 Safari/537.36
From the string above you can do quick regex for “Windows” and “Chrome” in your server side language to then conditionally serve the required CSS.
In PHP, it would look something like this:
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Windows') && strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome')) {
echo '<link rel="stylesheet" href="path-to-file/windows-chrome-fix.css" type="text/css" media="screen" />';
}Using JavaScript
Using the user agent again as in the same method above, we’ll look to match Windows and Chrome. Once a match is found, we can either insert inline CSS or a link to a CSS file:
if(navigator.userAgent.match(/Windows/) && navigator.userAgent.match(/Chrome/)) {
//Load a stylesheet
document.getElementsByTagName("head")[0].innerHTML += '<link rel="stylesheet" href="path-to-file/windows-chrome-fix.css" type="text/css" media="screen" />';
//Write the CSS change using inline styles
document.getElementsByTagName("head")[0].innerHTML += "<style>@media screen and (-webkit-min-device-pixel-ratio:0) {@font-face {font-family: 'MyFont';src: url('fonts/myfont.svg#myfont') format('svg');font-weight: normal;font-style: normal;}}</style>");
}Conclusion
Yup, Google Chrome for Windows sucks when it comes to rendering fonts. However, based off the Chromium forums, it looks like this bug is getting close to being solved
The Author
https://www.domsammut.com/?p=982#comment-1325#Marcin
I am using Windows 7 and I have a problem witch one of Google Fonts: Raleway. I checked and this fonts looks very good in Firefox (ver. 34) but in Google Chrome (ver. 39) it looks terrible in my computer. Sometimes I cannot read the text.
I described my problem on http://webmasters.stackexchange.com/questions/74672/rendering-of-raleway-google-web-fonts-in-chrome-browser
https://www.domsammut.com/?p=982#comment-682#RaoYv
Windows Registry editing fixed the font thickness issue for me completely,
we can tune the font thickness/darkness by calibrating FONTSMOOTHINGGAMMA value to
between 150 and 190 hexadecimal( 336 to 400 decimal )
– START -> RUN -> REGEDIT
– search for FONTSMOOTHINGGAMMA by keying “Ctrl F”
( will automatically take us to CurrentUser\ControlPanel\Desktop path)
– double-click mouse on FONTSMOOTHINGGAMMA enter any
thing between 150 and 190 hexadecimal.
(the Lower the value, the thicker the fonts.)
– close the REGEDIT tool
– LOGOFF and then LOGON
Now all the fonts are very thick & very dark in Chrome Browser.
But we must make sure that ClearType smoothing is enabled in Windows
( controlPanel -> personalization -> appearance
-> Effects -> ClearType smooth check (ticked box) )
OR alternately in RegEdit …
FONTSMOOTHING=2
FONTSMOOTHINGTYPE=2
FONTSMOOTHINGORIENTATION=1 for LCD-screen, 0 for CRT-screen
https://www.domsammut.com/?p=982#comment-684#Dom Sammut
Hey RaoYv,
Thanks for this solution. While this will work, we can’t expect the user to make these changes as it’s too complicated for the majority of them or they simply don’t care.
Still, it’s good to see there is a workaround!
Cheers
Dom
https://www.domsammut.com/?p=982#comment-990#Lauren Fages
Hello, i bought the font sackerlightroman on myfonts. In mac it is beautiful but with windows it’s really not good at all. They did’nt gave me a .svg so I don’t know how to generate it…
I ask myfonts to help me but they don’t want.
Can you please tell me what solution I have?
Thanks in advance.
Lauren
https://www.domsammut.com/?p=982#comment-100#Abhijeet Sapre
not working on my pc this solution, why is it so, I am doing the same as you have mentioned and I am using the Raleway font and I have generated the font-kit from font-squirrel website for the raleway web font, but then also it is showing rendered font in chrome browser, please help
https://www.domsammut.com/?p=982#comment-101#Dom Sammut
Hey Abhijeet,
I assume you’re referring to your website (multia.in). When I had a look at your stylesheet here:
http://multia.in/googlefont/assets/css/style.cssFor the SVG solution, when you use the
@media screen and (-webkit-min-device-pixel-ratio:0), you need to just declare the svg font and not the others, e.g:/* Normal font-face declaration */ @font-face{ font-family: 'Raleway', sans-serif; src: url('../assets/fonts/raleway-medium-webfont.eot'); src: url('../assets/fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/raleway-medium-webfont.woff') format('woff'), url('../assets/fonts/raleway-medium-webfont.ttf') format('truetype') url('../assets/fonts/raleway-medium-webfont.svg#Raleway') format('svg'); font-weight: 500; font-style: medium; } /* Webkit only SVG override for the same font, notice we aren't including truetype, opentype or woff fonts */ @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face{ font-family: 'Raleway', sans-serif; src: url('../assets/fonts/raleway-medium-webfont.svg#Raleway') format('svg'); font-weight: 500; font-style: medium; } }