Custom Fonts in Internet Explorer, Chrome, Firefox, and Safari
on September 3, 2013
Getting custom fonts to work across browsers can be somewhat challenging at times; different browsers require different font formats. Internet Explorer is (unsurprisingly) the worst offender, but even Chrome and Firefox prefer different formats. To avoid all the headaches that this causes, simply use the fail safe code below:
@font-face { font-family: 'CustomFontFamily'; src: url('customfont-webfont.eot?#iefix') format('embedded-opentype'), url('customfont-webfont.ttf') format('truetype'), url('customfont-webfont.svg#svgCustomFontName') format('svg'), url('customfont-webfont.woff') format('woff'); }
IE will use .eot
and Chrome will pick the first one that works: .tff
. Firefox will pick the last one in the list, .woff
, working or not, .woff
also works for Chrome, but causes aliased glyphs. Putting .svg
ahead of .woff
solves that issue.
Leave a Reply