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 designDrupalWeb DevelopmentADAHTML5productionresponsive designcompliancesecurityCSSPhotoshopdesignTestingFlashtoolsproduction tipsgoogletypographyGoogle Analyticsmarketingbeta testingautomationharness-bbrowserSSLE-commerceiOSweb standardsplug-infirefoxQAwebsite buildingapp developmentweb preflighttechnologiesJavaScriptthemesintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsquality controlMicrosoftmodulesOpenSSLserver securityIE8Long TailabletWebOSAndroidtabletsmobile devicesclientcommunicationimage size cloudtechnologyPDFresponsive statebreakpointimage compressionInteraction Metricsinstant video playback solutionvideo sizeInternet Explorer 83rd partyAdobe Edge ReflowawardsoftwarehostBacklinksAdvertisingapp lifespanmobile app challengeweb colorsgammacodecvideo playbackJSONRGBWindows XP LinkedInParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Cmicrosoft’s project natalsony playstationnintendo wiiaugmented reality3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingFacebookdudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityupdatevulnerabilityCKEditorCVE-2014-0224integrationprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommerceVideos and animations

Nov 17th, 2010 by Max Tokman

The idea behind target marketing is to increase profits (or traffic to your web site) by first identifying, and then targeting smaller, yet more profitable customer groups within the total market. By allowing businesses to spend fewer resources to attract more profitable customers, target marketing is easier and more c...

Aug 10th, 2010 by Max Tokman

Color profiles will look slightly different from one monitor to the next of different manufacturing. For example, if you put the monitor of a Mac next to the monitor of a PC and open the same web page on both monitors, more often than not, the color schematics will look slightly skewed from one to the other.It is impor...