Home Font-ificating: Delivering Web-Native Fonts

Font-ificating: Delivering Web-Native Fonts

Font faux pas happen all around us. Last night while you slept, someone wrote an entire sentence in Night Sky. While you ate breakfast, a notice about martial arts Shanghaied your inbox. And by the time you started work, thousands of grade school teachers typed their lesson plans in Comic Sans.

Sometimes poor typography is an honest mistake and sometimes it’s bad judgement. In the same way that I love cringeworthy headline puns, you should be free to experiment as a web typographer. However, due to the limitation of web-safe fonts, the world might be missing out on your creativity.

The Microsoft and Apple camps simply can’t agree on a catalogue of core fonts and Night Sky, Shanghai and Comic Sans do not render across all browsers without the help of a web-native font solution. For those who are unwilling to sacrifice looks for functionality, here’s an explanation of 4 solutions to make your serif’s sing.

1. sIFR (Scalable Inman Flash Replacement): sIFR is an open source typography solution that uses a combination of JavaScript, CSS and Flash to replace browser text with prettier web-native text. Essentially, you’re playing a Flash layer on top of the original web text. SIFR co-creator Mike Davidson blogs about it as being “a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics.” Critics argue that the option is slow to render in certain browsers. Nevertheless, sIFR is an extremely popular solution amongst designers and the simplified embeddable sIFR-based Font Burner is quickly gaining users.

2. @font-face: @font-face is a CSS rule where web designers reference a hosted typeface. Dave Rosenberg wrote a great piece about Firefox 3.5’s addition of the rule. Some designers prefer to use @font-face as it does not require viewers to have Flash installed; however, the solution is not available across older browsers. As well, Rosenberg notes that, “As with any linked asset, there is some level of security risk if a hacker gets their hands on the font file.”

3. Cufón: Cufón aims to be a sIFR alternative. Essentially, the solution allows designers to upload fonts, convert them to a proprietary format and render them using JavaScript. This solution overcomes sIFR’s speed issues as it is faster to render in Internet Explorer (since it uses VML) and it does not require the use of a plug-in. It also addresses @font-face’s security issues because uploaders retain control of the font files.

4. TypeKit: Judging by the fact that Evan Williams, Caterina Fake and Matt Mullenweg just invested in Small Batch Inc’s upcoming TypeKit, font designers might just get the recognition (and possibly pay) they deserve. While we’re unsure how this project will take shape, thanks to a TypeKit blog post, we do know that Small Batch is “working with foundries to develop a consistent web-only font linking license.” Naysayers already speculate that the solution will be slow and costly to website owners, but the legal implications of this tool may open up typeface options for designers.

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.