CSS Custom fonts in Windows
Apparently either IE or something in Windows doesn’t like custom fonts in CSS. I discovered this while trying to place a custom font in a Titanium Desktop app using the (so I thought) standard:
1 2 3 4 | @font-face { font-family: 'MyFont'; src: url('myfont.ttf'); } |
This works great in Firefox and Safari, as well as Titanium’s application, until I tried it in Windows. Apparently it doesn’t like .ttf’s. This website outlines a little about why Windows doesn’t like .ttf’s, which lead me to this handy site that you can use to convert your font to all standards and it outputs a CSS for you to use. Here is mine:
1 2 3 4 5 6 7 8 9 10 | @font-face { font-family: 'MyFont'; src: url('myfont.eot'); src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.svg#MyFont') format('svg'); font-weight: normal; font-style: normal; } |
Wallah! Magically it works. I don’t understand why, though.
3 Responses to "CSS Custom fonts in Windows"