Website Development

Custom Fonts in Internet Explorer, Chrome, Firefox, and Safari

crash-test-c133-previewGetting 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

Your email address will not be published. Required fields are marked *