Blog

Technologies of embedding custom fonts into the web-page

Sep 13th, 2010 by Max Tokman

All existing technologies of embedding custom fonts may be classified into three major methods:

  1. Substitution of source text by flash movie or graphic image.
  2. Font is converted into some intermediate format, then JavaScript is used for rendering.
  3. CSS @font-face technology.

Here are some specific services for rendering custom fonts that work via substitution of source text by Flash movie or graphic image:

sIFR (Scalable Inman Flash Replacement)

sIFR uses Flash technology to render the desired font. This is an open-source typography solution that anyone can use, free of charge. First, the developer embeds a font into the source .fla file and generates a flash movie. Then, the original text element on the webpage is replaced with this flash movie using JavaScript. It will end up having the same position and dimensions as the original element.

Advantages: fast; small size of generated flash movies; user can copy replaced text.

Drawbacks: requires installed Flash-plugin in bowser; developer should use Adobe Flash  to prepare flash movies.

http://www.wikipedia.org/wiki/Sifr

FLIR (FaceLift Image Replacement)

This technology does not require flash and is using server-side php scripts to dynamically generate image representation of text on the webpage. Then this text is automatically replaced with generated image via JavaScript. FLIR is free of charge.

Advantages: no font conversion is needed, supports both .ttf (Tru Type Font) and .otf (Open Type Font) fonts. FLIR is easier to implement than sIFR, its main competitor. FLIR will work for those that don’t have flash whereas sIFR will not.

Drawbacks: very resource heavy and slow in rendering; requires both server-side and client-side setup, and the user can’t copy replaced text.

Here are some specific services for rendering custom fonts that work by converting a given font into some intermediate format, then using JavaScript to customize:

Cufón

Technically this is an analog of typeface.js. Original font should be also converted to some intermediate format. Then it is rendered by JavaScript engine. Like typeface.js, it does not use Flash, rather a combination of <canvas> and <VML> to render the fonts.

Advantages: same as for typeface.js, plus it works faster and has smaller size of converted files. Again, usability is a lot simpler than sIFR.

Drawbacks: user cannot copy replaced text.

http://cufon.shoqolate.com/generate/

Here are some specific services for rendering custom fonts using CSS @font-face technology

@font-face Kit Generator

This is a free service. The developer just uploads custom fonts and agrees that the uploaded fonts are legally eligible for web embedding. Then he or she may choose converted formats and even some additional font settings. Finally this service generates CSS code required for embedding. All that you need to do is just copy and paste this code into your .css file and put the converted fonts on the server.

http://www.fontsquirrel.com/fontface/generator

Typekit

This service essentially does all the work for you. The only thing that you need to do is choose the specific fonts that you’d like to use from their library of fonts and embed JavaScript into the webpage. A big drawback of this service is that it is not free of charge. Also, you can’t use your own font, you can only choose from the select few that are available in it’s library.

http://typekit.com/

Google Font API (Application Programming Interface)

Google now also has its own interface for embedding custom fonts into a webpage. It is completely free, works in most browsers and is easy to use. The biggest drawback is the same as Typekit: you may choose font only from the Google font directory (http://www.google.com/fonts). All fonts are available under an open source license.

https://developers.google.com/fonts/

CSS @font-face is a cross-browser font-embedding technology which was introduced in 1998, however it hasn’t really come into play until recently. It wasn’t considered a viable option because different browsers wouldn’t support different font types. For example Firefox supports .ttf (Tru Type Font) and Internet Explorer supports .otf (Open Type Font) etc. However, in October 2009, Mozilla announced support of WOFF (Web Open Font Format). It essentially acts as a container for .ttf and .otf and was specifically developed for web-developers. Now, all the major browsers including Firefox, Internet Explorer, Opera, Safari and Chrome, support this property.

This has led CSS technology of embedding custom fonts to become one of the most impressive, not only because it’s cross-browser, but also because it’s easy to setup, doesn’t require additional plug-ins or JavaScript and works fast. Also, rendered text can be copied and is easily indexed by search engines.

The one thing to remember about rendered text is that sometimes it might look inaccurate or fuzzy on Windows, although it looks fine on MAC. This happens because Apple and Microsoft use different algorithms for font rendering on the screen. Windows system custom fonts always look fine if they are optimized for “ClearType” rendering technology, developed by Microsoft. If not, their look may vary from fairly good to fairly ugly.

 

Categories:

wordpressSEOweb designWeb DevelopmentHTML5productionresponsive designDrupaldesignCSSPhotoshopsecurityADAgooglebeta testingautomationharness-btoolsGoogle AnalyticsTestingmarketingFlashproduction tipstypographyAdobe Museweb imagesite speedintegrationswebsite buildingtechnologiesJavaScriptfirefoxbrowsercomplianceserver securityquality controlfontsthemesMicrosoftmodulesApplemobile websiteapp developmentplug-inAPIweb standardsweb preflightiOSInDesignE-commerceOpenSSLSSLIE8JSONQAmobile devicestabletsAdobe AirRIAsInteraction MetricsAdvertisingLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildWordpress pluginshorizontal layoutBacklinksAdobegTLDscustom domain suffixesdevelopmentwireframeaugmented realityweb awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templateICANNweb development awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
Exporting from InDesign to Photoshop

Jul 24th, 2014 by Max Tokman

If you're still using InDesign instead of Photoshop to create your web layouts, you can use our script to convert InDesign to layered PSD (currently for Mac only).  Please follow these simple steps: 1. Download script archive version 2.2   2. Have your InDesign document open and Photoshop runn

The Online Subscription Dilemma

Jun 15th, 2011 by Max Tokman

The New York Times is known as “The Old Gray Lady” in the industry for its adherence to traditional, proper journalism in both form and substance. These principles have earned the paper more Pulitzer Prizes than any other news organization and made it the paper of record for generations. But generations have come and