Blog

Custom typography on the web

Jun 2nd, 2014 by Max Tokman

Online presence is always a part of the overall branding strategy and as such, follows the same typography guidelines.  As we all know by now, web typography presents a unique set of challenges; fortunately, for every challenge there’s a solution.  The technical solution is driven by larger decisions - generic free fonts vs. custom licensed typography, open source usage vs. one time license vs. ongoing license fees.  

Once the hurdle of business decision is cleared, technical implementation is straightforward: fonts are either embedded in the page or linked from an external font service.  External font services such as @font-face, Google fonts, or webtype.com offer custom typography that can be connected using a simple “link” tag, as in:

<link href='http://fonts.googleapis.com/css?family=Croissant+One' rel='stylesheet' type='text/css'>

The benefit of using external font service is gaining immediate access to ready source of commercially developed fonts.  Drawbacks include potential licensing fees and the possibility of font service being temporarily unavailable, in which case custom fonts will default to standard fonts.  There’s also a slight delay in load time as fonts are being downloaded from external server, which may or may not be noticeable depending on user’s connection.
 

Embedded fonts come in a variety of formats, majority of browsers except Internet Explorer supporting OTF and TTF file formats.

IE( including 10) supports ЕОТ
IE >= 9  supports WOFF
FF >= 3.6  supports WOFF, OTF, TTF
Safari supports OTF, TTF, SVG
Chrome supports OTF, TTF, WOFF
Opera supports OTF, TTF, SVG

Embedded fonts provide a more stable viewing experience, without reliance on external font services.  However, converting desktop fonts to web-compatible formats involves additional labor costs which may or may not be justified, depending on brand’s flexibility on web font usage and potential substitutions. At the end of the day, the choice is driven by a compromise between brand’s typography requirements, costs, and reliability.
 

If you decide to go with embedded fonts option, there are online services that perform the conversion:

1) http://www.fontsquirrel.com/tools/webfont-generator   (to  .eot, .ttf, .svg, .woff)

 2) http://onlinefontconverter.com/ - (to/from: .pdf, .dfont, .eot, .otf, .pfb, .tfm, .pfm, .suit, .svg, .ttf, .pfa, .bin, .pt3, .ps, .t42, .cff, .afm, .ttc, .woff)

 3) http://www.freefontconverter.com/ (from: .pfa, .pfb, .pt3, .sfd, .ttf, .otf, .otb, .t42, .cef, .cff, .gsf, .ttc, .svg, .ik, mf, .dfont, .bin, .suit, .bdf     to:  .otf, .ttf, .svg, .woff,  .ps, .pfa, .pfb, .pt3, .cff, .t42) 

 4) http://www.fontconverter.org/    (to:  otf, ttf, fon, pfb, pt3, dfont, afm)

 5) http://www.font2web.com/

wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Jun 6th, 2014 by Max Tokman

A new vulnerability in OpenSSL, CVE-2014-0224, was reported yesterday 6/5/14. This should not be a concern for any of our customers, as we updated OpenSSL the same day and sites under our management are fully protected. Vulnerability description: https://www.openssl.org/news/secadv/20140605.txt ...

May 29th, 2014 by Max Tokman

Having the best site on the web is no guarantee it will be found and appreciated. You have to actively promote it and one of the best ways to increase the site’s visibility is to drive traffic through major social networks, such as Facebook and LinkedIn. However, that calls for increased marketing efforts, ...