Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I just purchased the DIN font, it includes all the following file formats (.otf, .eot, .woff and .ttf)

Now these fonts don't look the same on cross platforms like MAC and PC, it looks great on PC but doesn't look the same on MAC (especially the light version of the font, it looks the same as regular). I did some research and noticed that the best way to resolve this issue is to use a SVG version of the font (Google does the same with it's Google fonts).

Any of you know how I could convert my fonts to an SVG file format? or any other solution how to resolve this cross platform issue?


share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

Differences in the way the fonts are rendered are, unfortunately, impossible to avoid. This is not the case for all of them, but it is for most. That's why I always try to test drive the fonts live (some foundries allow this) for different browsers and OS.

You can use SVG fonts, but you have to be aware of the browser compatibility limitations. Opera and WebKit added support for SVG, but Mozilla and Microsoft decided not to, and that limits their usefulness. Before, SVG Fonts were the only way to use webfonts on iOS devices (iPhone, iPad), and that's why FontSquirrel includes them in their font-face package, but iOS 4.2 added support for TTF fonts.

There is a proposal by the SVG glyphs for OpenType Community Group to add a subset of SVG to OpenType.

So, in short: SVG fonts render nicely, but are not supported by IE or Firefox. WOFF, TTF and others render differently depending on browser and OS, but your font will always be displayed.

About the accessibility, mentioned as a possible issue by DA01, I can't find any specifications regarding browsers either. This is the closest I got to the subject, but it talks about text in SVG graphics, not SVG fonts. It might or might not apply:

Images containing text are better served as SVG than a raster alternative. Charts and diagrams fall under this category. In addition to the added benefit of scalability, the text in charts and diagrams retains the properties of text. It can be copied and pasted, searched, and easily updated. Image headers containing decorative text may be candidates for using SVG. WOFF fonts combined with a text stroke and gradient or pattern fill enables customized text to remain selectable and indexed by search engines.

share|improve this answer
add comment

There's no way to get a web font to look the same on every browser and every operating system. They all have different rendering engines, defaults, font smoothing methods, etc.

I'm also not sure of this, but do investigate the accessibility of SVG fonts. They may have some issues (someone correct me if I am wrong).

share|improve this answer
add comment

In your CSS where you are declaring @font-face, make sure you set the font-weight to normal.

Also on your body, try this

body {-webkit-font-smoothing: antialiased;}

Keep in mind that not all webfonts you will come across are truly optimized for the web (i.e. majority of Google's webfonts). I recommend Webtype's RE Series.

share|improve this answer
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.