CODEWITHSUNDEEP
fontscross-browser
Rick Donohoe
Rick Donohoe

Reputation: 7271

How to deal with Font appearing differently across browsers

We are using the Titlium font across our main menu navigation items, which is from file "TitilliumWeb-Regular.ttf".

How come the font looks different in Firefox than it does in Chrome? I seem to find one appears quite jagged when I compare them. Is this just standard Browser behaviour or is there something I can do to improve this?

The site in question is here - http://www.microserveltd.co.uk

Upvotes: 0

Views: 82

Answers (1)

albert
albert

Reputation: 8153

they differ because windows browsers implement their own rasterization engines to convert vector fonts to pixels -> different implementations = different results. one easy fix for WebKit is to add -webkit-font-smoothing:antialiased to your font declarations, but that should be used warily and clearly won't help for non-WebKit browsers. also, you're only serving up .ttf font formats, if you served up multiple types of files you'll get better cross-browser/cross-platform performance. you can generate the @font-face styles at font squirrel and you can read about the value of OTF vs TTF here: http://blogs.adobe.com/typblography/2010/12/the-benefits-of-opentypecff-over-truetype.html

Upvotes: 1

Related Questions