Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. 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?

Thanks

share|improve this question
add comment

4 Answers 4

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
1  
offhand, i think you are referring to them being used, or rather abused by icon font enthusiasts, where common practice is to render the .svg in a <code>i</code> element. this is bad for accessibility, so its bad for the web. –  albert May 2 at 15:57
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

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.

share|improve this answer
add comment

Your Answer

 
discard

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.