Video Screencast Help
Design@Symantec

Experiments With Rendering Custom Fonts As Web Fonts

Created: 21 Apr 2011 • Updated: 03 Jun 2014 • 3 comments
Rich Lam's picture
0 0 Votes
Login to vote

Serving up the @font-face property is still fairly rare on corporate sites, yet this treatment has been gaining popularity across the Web over the past year. Using @font-face replaces the need for creating graphics or flash to display a non-standard Web browser font.

Incorporating the custom font onto the VeriSign Authentication website is an opportunity to improve the user experience without taking away from the visual experience for users.

In this experiment, we converted the fonts into multiple web-friendly formats (e.g. WOFF, EOT, TTF, SVG) for cross-browser and mobile support. The next step was to apply our various font weights (regular, light, medium, and bold) to see them at different sizes. The result was that they looked great at larger font sizes but were not as sharp at smaller sizes. As in the screenshots below, the anti-aliasing of Web fonts will display differently for Windows and Mac users.

Mac vs Windows

Samples of custom font at various sizes and treatments

Comments 3 CommentsJump to latest comment

daigoumee's picture

Superb blog post, I have book marked this internet site so ideally I’ll see much more on this subject in the foreseeable future!

0
Login to vote
acoTranslations's picture

Interesting experiment, I often have clients who want to know how much you can play with fonts on websites.

0
Login to vote
rtyecript's picture

I really liked the article, and the very cool blog

0
Login to vote