DEVseo

I've been a little annoyed with the font rendering in  Google Chrome recently because it just hasn't been a crisp as in other modern browsers such as Firefox (see here, and here, and here). It seems that Chrome 37 has now  fixed this issue released in May (so get your browser updated!) meaning that locally hosted web fonts that use SVG formats for Chrome users now look very polished.

However, there's still a slight issue in Chrome when you use fonts from their hosted  fonts. When you include the link to the web font in the head of your page it detects the browser being used and serves the correct font type for that browser (speeding things up and keeping the filesize as small as possible). But this method does not return an SVG for Chrome users, it returns a .woff file. Chrome can't cope with these so the anti-aliasing will be very much non-existent.

So what can you do?

Well, there is a fix. It's not exactly quick and easy, but it won't take long and will mean that smooth edge in all modern browsers. Follow the steps below to implement:

1. Instead of linking to the font, you will need to download it. To do this, click "Add To Collection" on the font(s) of your choice. In the top right of the fonts page you will see a little down arrow. Clicking this will allow you to download the font. You'll get a message about not needing to do this, but clearly we do! The first option below the message should be "Download the font families in your Collection as a .zip file". Click that .zip file and download it.
2. Then, extract the font with whatever you use to extract .zip files.
3. Next you'll need to head over to the Font Squirrel Webfont Generator.
4. Add the download .ttf font file, wait for the upload to complete, check the "yes" box asking about legally embeddable fonts and click "Download Your Kit". You should now have a zip file with all the different types of font required.
5. Upload to your server and add the following to your CSS:

@font-face {
	font-family: "Indie Flower";
	src: url('/path/to/font/indieflower-webfont.eot') format('embedded-opentype'), 
	     url('/path/to/font/indieflower-webfont.woff') format('woff'), 
	     url('/path/to/font/indieflower-webfont.ttf')  format('truetype'),
	     url('/path/to/font/indieflower-webfont.svg') format('svg');
}
/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: "Indie Flower";
		src: url('/path/to/font/indieflower-webfont.svg') format('svg');
	}
}

Note, I chose Indie Flower in the above example. Change that for the font you selected, add the right path to the font and you're done! You can now use the font in all it's glory.

You may have seen the first @font-face declaration before. The second is simply used to ensure that Chrome uses the .svg file rather than .woff.

Now all of your fonts will be lovely in all of the modern browsers.

Edit:

Ah caveats. After some more testing of this it seems that SVG fonts don't work in  open select lists. The font seems to get the wrong character by one (so, for example, 'a' would show a 'b', 'b' would show a 'c' etc). For now it doesn't look like Chrome is going to do anything about this either.

There is a workaround for this until it does get fixed. Inside that media query above you can add the following:

	@font-face {
		font-family: "Indie Flower Select";
		src: url('/path/to/font/indieflower-webfont.woff') format('woff');
	}
	select {
		font-family: "Indie Flower Select", cursive;
	}

All we are doing it making sure that for Chrome users <select> elements render the .woff version of the font, which doesn't have a weird glyph issue. Oddly enough, this doesn't work just adding it to the <option> element in CSS. It must be the parent <select>!