‘Stupid’ Question 6: Do you have to pay to use fonts in a web application?

Do you have a favorite font? I sure do :) But did you know fonts are software?

[To celebrate my first year of programming I will ask a ‘stupid’ questions daily on my blog for a year, to make sure I learn at least 365 new things during my second year as a developer]

A discussion I had with a dear friend of min, Kim Brockie (also known as MrKSB), about design led me to this question. Why my interest in fonts? Apart from my love for Metro design and typography art, I just love software in all shapes and sizes,- and fonts are software! Anyway, Kim and I were talking about some design he had done, and I asked him about the fonts used (it was a web application, a CMS). He talked about buying fonts, and I realized that I have never really thought much about the fact that you need licenses for many fonts- and that the license need depends on the use- and varies a lot. Just as with stock images- you have to pay for a license if it is for commercial use (AKA commercial fonts)! (single or a package- depends on the license). It is actually quite complicated, and especially when it comes to web applications.

This is what I found out from my research, and please correct me if I am wrong!

If you reference fonts in your css, then it is perfectly fine- as it is the user that has the fonts installed (and therefore the license for the fonts) and you are not distributing the fonts.
This is legal:
[sourcecode language=“css”]
//

p {
font-family:“Times New Roman”, Times, serif;
}

//
[/sourcecode]

If you reference the fonts with @font-face it is not legal with the same fonts as above, as you are providing the font!
[sourcecode language=“css”]
//

@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}

p{
font-family: SketchRockwell;
}

//
[/sourcecode]

• if you notice the.ttf, this is the font file.

If you provide/distribute the font in any way, and you don’t have a license, then it is not legal.

Many fonts also require license if the are embedded (think: JavaScript, Flash and PHP), and often an extended license is required! It is also possible to argue that font-face embedding is embedding, but you are better of reading the EULA (End User License Agreement).

When used in images it gets even more tricky, and you should be very careful there. Some allow you to if it is only a title/description, but not if it used as ‘art’. Often there are restrictions on digital formats (again with the distribution). Always read the license agreement!

Be aware of so-called free fonts. Many will upload , as often done done with software, fonts that arent free to a site,- or the font will be incorrectly labelled as free (and in the user agreement it will have sone heavy restrictions making the fonts useless as-is). In short, stick to known large font-sites, make sure you read the agreement and that you know what you will be using the font for and under which circumstances, and if you are in doubt- contact the artist and ask! Rather safe than sorry, especially if you are making a commercial site for a client as the responsibility lies with you.

I’ll reveal tomorrows question now, as it is related:
‘Stupid’ Question 7: How do I add a font (google web fonts example), and where do I find the license?

Comments

Which is why In the bad old days of web design :) to avoid this issue and the fact that users may not have a specific font loaded on their machine we used to cheat :)

Design the thing u wanted with the font and then turn it into a jpeg  and just load the picture :)

oooops :)  wont really work with metro tho where 90% of the design is the font and text and not graphics 

It's worth mentioning that not every server is prepared to serve custom font-faces.You may need to add a MIME type for the font format you're using.

eot application/vnd.ms-fontobject
woff application/font-wof
 application/octet-stream 

(The comment system ate part of my last line)

[everything else] application/octet-stream 

"It depends" is the right answer as the license rights are determined by the designer/curator of the typeface.  Most of the time you'll find the big font foundry places don't allow embedding of fonts for these purposes, however I think times are changing for sure.  I love to identify very permissive fonts and Smashing Mag is a great source of these.  They just posted some great ones that have varying licenses, but most "free" and permissive.  Example: http://www.smashingmagazine.com/2012/07/20/free-font-round-up/ 

I <3 @font-face.  Being able to have fonts that scale with responsive design is far nicer than having to fiddle with images. 

I suggest using www.typekit.com or a similar system. They will take care of the licensing issues, etc for you. Also, www.fontsquirrel.com has free fonts for commercial use, and they are fine to use on your web pages.

It should be noted that many .tff or .otf fonts won't work well in a browser. Many fonts are 'hinted' so they will render will as a bitmap. This is especially important at sizes of 18 pixels are smaller - in this case the rendered typeface needs hinting too look accurate on a bitmap screen with lower resolution. 

Last modified on 2012-07-23