Optimising shiny banner texts for the web
Imagine a situation when a picky designer wants to use a fancy font for a banner or a promo page. It is a one time job and you don’t expect this fancy font to be used again.
For the designers it is easy, they just create vector art work in Adobe Illustrator and then ask us, web developers, in what format do we want the assets for markup.
There are three wrong ways of doing it and I know one right way.
Designer can export fancy text as SVG
It will render crisp and nice on all devices.
But don’t be surprised by an 800 KB SVG file for the one line of vector text.
In no way it is a good option for a downloaded resource.
Designer could rasterise the line of text as transparent PNG in several resolutions for the most used screen dimensions
Though rasterised text as PNG will probably weigh less than same text in SVG, it is still wrong.
There are many reasons why rasterising text is bad: SEO, accessibility, download size and crappy rendering if image-text gets resized.
But most of all, there are no common screen resolutions that you may use.
Internet devices range from 3 inches to 60 inches, there is no excuse for identifying “breakpoints” for your responsive design based on this year’s phone/tablet sales figures. So how many images do you need to generate for your piece of text?
Designer could supply you with a font file for the text and let you do the rest in HTML and CSS
Yep, this will be crispy clean for any text and screen size as long as the characters you use are within font’s supported range.
There are many quirks and tricks that you should be aware of and the larger the font is, the longer it may block the text on your website from being rendered.
But what if you need a font for just a line of text 20 characters long?
Is it right to download 150KB .ttf file (70 KB .woff if you don’t care about android < 4.4) for that?
Of cours not, take the file and strip it down to the minimum that you need.
Subsetting a font file for a one time job
There is a nice tool written in Perl by Philip Taylor to make our 150KB font into less than 20KB file.
Here is how you do it:
Clone repo with Mercurial
hg clone ssh://hg@bitbucket.org/philip/font-optimizer
cd font-optimizerRun the subset command passing all the text that you need to render.
Don’t worry about repeating characters.
./subset.pl --chars="Look, how creative I am\!" input.ttf output.ttf
And that is what you’ve got on the output
All you need to do is write a @font-face CSS rule
@font-face {
font-family: MyWebFont;
src: url('output.ttf') format('truetype'),
}And it is a good idea to base64 the font right into the CSS file.
To do it manually:
- Upload the font file to http://base64-encoding.online-domain-tools.com/
- Download and copy the encoded string
- Test it in HTML like this:
<style>
@font-face {
font-family: MyWebFont;
src: url(data:font/ttf;base64,AAEAAAAO.../hbAEjQA=) format('truetype'); /* ascii puke in this line is the base64 encoded binary file that you need to paste */
}
</style>
<span style="font-family: MyWebFont">Look, how creative I am!</span>And this is what it looks like in browser:
Update for Google Fonts users
If you use Google Fonts then there is no need to download the font and then subset it manually.
Google Fonts provides you with a link to the font of you choice:
<link href='http://fonts.googleapis.com/css?family=Walter+Turncoat' rel=’stylesheet’ type=’text/css’>Just add a &text query parameter to the href and Google Fonts will generate a font containing only the symbols you have specified.
<link href='http://fonts.googleapis.com/css?family=Walter+Turncoat&text=LookhowcreativeIam!' rel=’stylesheet’ type=’text/css’>Google Fonts is quite smart to deliver the right font for any browser.
But there may be good reasons to download the font if you don’t want to depend on Google CDN or want to embed it into CSS.
Just open the above href link in a browser window and it will show the URL of the font file to download.
Read more on Google Font parameters here.
