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

Question

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?

Thanks

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

you can convert your fonts to other font formats at
http://fontsquirrel.com/
and at
http://onlinefontconverter.com
the latter allows any font to be converted, whereas font squirrel will prevent you from converting fonts if their creator has asked them to.

font squirrel will also take all of your desired format conversions and roll them up into your own personal @font-face declaration. when used appropriately, this sets the foundation for cross-browser/cross-platform domination, however the ecosystem is so broken, your experiences will vary, particular when dealing with old/weak hardware, old/weak browsers, and may god help you should you have to deal with both. ;)

@Chris Burton mentioned -webkit-font-smoothing:antialiased, which offhand should make your solution more robust. just pay attention when applying it: you may not even need it first off, second off, after you apply it, test it in the browsers and environments that you are supporting...when i do i am looking in particular for performance issues.

google fonts and typekit offer solutions so you don't have to think about this. they're helpful, but i don't see any need for them in my workflow, i don't want the extra http request(s), extra javascript file(s), nor my css typography declarations being set anywhere but in the tip-top of my head element, write below the document's title element.

@DA01 said there is no way to get a web font to render cross-browser/cross-platform; there is a method, however i'm not up to speed on its inner workings, as i've never used it.
i'm talking about cufon, which uses javascript to deliver the font(s) into the document, however it relies on flash to render/draw the font(s).
again, i'm not even sure what font format(s) work/don't work here, and considering i just added not one, but two languages into the mix, there's at least a minimal performance hit being taken there.
but cufon is the truth! it will render exquisite typography on whatever device you desire.

actually, i'm a liar, because iOS doesn't use flash, and consider users with flash blocked (like me), cufon is not failsafe....drat. apologies.

still, it is a very well implemented technique, and i'm willing to bet easy money that the flash part can be implemented by javascript entirely.