Cross platform (PC and MAC) font rendering issue and font conversion to SVG


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?


10/9/2013 1:34:00 PM

Accepted Answer

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.

4/13/2017 12:46:00 PM

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).