StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POImplementing @font-face as of late 2012
text
Body
copied!<p>I've been spending a few evenings investigating the best way to implement @font-face with todays modern browsers. I am a full time web/system developer with a background as a graphic designer I find the opportunities and possibilites with web design becoming more and more interesting. So, I made some testing and would like to hear if anyone has advices, any better ideas or inputs on this. My testing scenario looks like this.</p> <p>I tested with ALOT of different online tools and applications but in the end I boiled this down to one online service and one application.</p> <ul> <li>FontSquirrel, online tool - free. <a href="http://www.fontsquirrel.com/fontface/generator" rel="nofollow noreferrer">http://www.fontsquirrel.com/fontface/generator</a></li> <li>FontXChange, application for mac/win - 99$. <a href="http://fontgear.net/fontxchange.html" rel="nofollow noreferrer">http://fontgear.net/fontxchange.html</a></li> </ul> <p>I used a font that was shipped with my Mac, Tamil Sangam MN and Tamil Sangam MN Bold, both came as open type, .otf.</p> <ul> <li>TamilSangamMN.otf - 290 KB</li> <li>TamilSangamMNBold.otf - 271 KB</li> </ul> <h1>Investigating conversion sizes</h1> <h2>FontSquirrel</h2> <p>This is a good online tool, it's very good. There are a few different modes and I've used the Basic and Optimal. The output of my .otf file was svg, ttf, eot and woff.</p> <h3>Basic</h3> <p><strong>Regular</strong></p> <ul> <li>TamilSangamMN.svg <strong>233 KB</strong></li> <li>TamilSangamMN.ttf <strong>71 KB</strong></li> <li>TamilSangamMN.eot <strong>25 KB</strong></li> <li>TamilSangamMN.woff <strong>30 KB</strong></li> <li><strong>Total: 359 KB</strong></li> </ul> <p><strong>Bold</strong></p> <ul> <li>TamilSangamMNbold.svg <strong>225 KB</strong></li> <li>TamilSangamMNbold.ttf <strong>69 KB</strong></li> <li>TamilSangamMNbold.eot <strong>25 KB</strong></li> <li>TamilSangamMNbold.woff <strong>30 KB</strong></li> <li><strong>Total: 349 KB</strong></li> </ul> <h3>Optimal</h3> <p>First thing I noticed with the optimal fonts are that they are considerably much smaller than the basic variants ~ 260 KB!</p> <p><strong>Regular</strong></p> <ul> <li>TamilSangamMN.svg <strong>33 KB</strong></li> <li>TamilSangamMN.ttf <strong>25 KB</strong></li> <li>TamilSangamMN.eot <strong>15 KB</strong></li> <li>TamilSangamMN.woff <strong>17 KB</strong></li> <li><strong>Total: 90 KB</strong></li> </ul> <p><strong>Bold</strong></p> <ul> <li>TamilSangamMNbold.svg <strong>33 KB</strong></li> <li>TamilSangamMNbold.ttf <strong>25 KB</strong></li> <li>TamilSangamMNbold.eot <strong>15 KB</strong></li> <li>TamilSangamMNbold.woff <strong>17 KB</strong></li> <li><strong>Total: 90 KB</strong></li> </ul> <h2>FontXChange</h2> <p>This tool can do so much more than just juggling fonts for the web. It can convert several formats between each other; like opentype, true type, web fonts, post script and so on. The result is overall very high quality the files are so large, almost twice the size of FontSquirrels Basic versions and over 7 times bigger than FontSquirrels Optimal version.</p> <p><strong>Regular</strong></p> <ul> <li>TamilSangamMN.svg <strong>480 KB</strong></li> <li>TamilSangamMN.ttf <strong>72 KB</strong></li> <li>TamilSangamMN.eot <strong>72 KB</strong></li> <li>TamilSangamMN.woff <strong>80 KB</strong></li> <li><strong>Total: 704 KB</strong></li> </ul> <p><strong>Bold</strong></p> <ul> <li>TamilSangamMNbold.svg <strong>463 KB</strong></li> <li>TamilSangamMNbold.ttf <strong>69 KB</strong></li> <li>TamilSangamMNbold.eot <strong>70 KB</strong></li> <li>TamilSangamMNbold.woff <strong>80 KB</strong></li> <li><strong>Total: 682 KB</strong></li> </ul> <h1>Setting up the CSS</h1> <p>It puzzled me a bit in the start that the actual order in the font list mattered. Then I discovered that some takes the first format that it finds compatible rather than sticking with the format that is optimal - and it sucks. After some laborations I found that this is the optimal way to format your css (note the order of the file types | <strong><em>important!</em></strong>).</p> <pre><code>@font-face { font-family: 'TamilSangam'; src: url('.eot'); src: url('.svg') format('svg'), url('.eot?#iefix') format('embedded-opentype'), url('.woff') format('woff'), url('.ttf') format('truetype'); font-weight: normal; font-style: normal; } </code></pre> <h1>My test results</h1> <h2>Regular fonts</h2> <p>I did mark the best version with a *</p> <p><strong>Firefox MAC (15.0.1)</strong></p> <ul> <li>FontSquirrel Optimal: Renders a bit to fat</li> <li>FontSquirrel Basic: Renders a bit to fat</li> <li><strong>FontXChange 4.0: Renders a bit to fat, but the kerning is better than the FontSquirrel version *</strong></li> </ul> <p><strong>Firefox Windows (15.0.1)</strong></p> <ul> <li>FontSquirrel Optimal: Renders very nice</li> <li>FontSquirrel Basic: Font gets jagged/choppy</li> <li><strong>FontXChange 4.0: Renders very nice *</strong></li> </ul> <p><strong>Safari Mac (6.0)</strong></p> <ul> <li>FontSquirrel Optimal: Perfect render</li> <li>FontSquirrel Basic: Perfect render</li> <li><strong>FontXChange 4.0: Perfect render *</strong></li> </ul> <p><strong>Chrome Mac (21.0)</strong> </p> <ul> <li>FontSquirrel Optimal: A bit fat</li> <li>FontSquirrel Basic: A bit fat</li> <li><strong>FontXChange 4.0: Perfect render *</strong></li> </ul> <p><strong>Chrome Windows (21.0)</strong> </p> <ul> <li>FontSquirrel Optimal: Perfect render</li> <li>FontSquirrel Basic: Perfect render</li> <li><strong>FontXChange 4.0: Perfect render *</strong></li> </ul> <p><strong>Internet Explorer (9.0)</strong> </p> <ul> <li><strong>FontSquirrel Optimal: Perfect render *</strong></li> <li>FontSquirrel Basic: Perfect render </li> <li>FontXChange 4.0: Font gets jagged/choppy</li> </ul> <h2>Bold fonts</h2> <p><strong>Firefox MAC (15.0.1)</strong></p> <ul> <li><strong>FontSquirrel Optimal: Renders very fat *</strong></li> <li>FontSquirrel Basic: Renders very fat</li> <li>FontXChange 4.0: Renders very fat, but better kerning <em>(I would like to select this one for the mac but since the windows version of firefox isn't compatible here it has to go)</em></li> </ul> <p><strong>Firefox Windows (15.0.1)</strong></p> <ul> <li><strong>FontSquirrel Optimal: Renders ok, not very antialiased *</strong></li> <li>FontSquirrel Basic: Font gets jagged/choppy</li> <li>FontXChange 4.0: Font gets a bit distorted/jagged</li> </ul> <p><strong>Safari Mac (6.0)</strong></p> <ul> <li><strong>FontSquirrel Optimal: Perfect render *</strong></li> <li>FontSquirrel Basic: Perfect render</li> <li>FontXChange 4.0: Renders fat</li> </ul> <p><strong>Chrome Mac (21.0)</strong></p> <ul> <li><strong>FontSquirrel Optimal: Perfect render *</strong></li> <li>FontSquirrel Basic: Good render, a few percent to fat</li> <li>FontXChange 4.0: Renders fat</li> </ul> <p><strong>Chrome Windows (21.0)</strong></p> <ul> <li><strong>FontSquirrel Optimal: Perfect render *</strong></li> <li>FontSquirrel Basic: Perfect render</li> <li>FontXChange 4.0: Renders very fat</li> </ul> <p><strong>Internet Explorer (9.0)</strong></p> <ul> <li><strong>FontSquirrel Optimal: Perfect render *</strong></li> <li>FontSquirrel Basic: Perfect render</li> <li>FontXChange 4.0: Font gets jagged/choppy</li> </ul> <h1>The final implementation</h1> <p>I usually organize my webfonts in the following pattern, <webfonts> / <conversion source> / <conversion method> / <fonts></p> <pre><code>/* Regular */ @font-face { font-family: 'TamilSangam'; src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot'); src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'), url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'), url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'), url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Bold */ @font-face { font-family: 'TamilSangam'; src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot'); src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'), url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'), url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'), url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } </code></pre> <p>Graphical overview of the result (fullsize at <a href="https://i.stack.imgur.com/atb98.png" rel="nofollow noreferrer">http://i.stack.imgur.com/atb98.png</a>)</p> <p><img src="https://i.stack.imgur.com/atb98.png" alt="enter image description here"></p> <h1>Conclusions and quests</h1> <p>There isn't one single tool out there that will deliver fonts that render nice on the Mac and Windows in all browsers. You must experiment and test on each font. The methodology posted above is just a simple way and suggestion how to test and experiment with @font-face's. </p> <p>Is there anything you think I could change in my methods or implementation, is there any application or service that I missed?</p> <p>All the best / T</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload