COM271, Week 4
Embedding Fonts on Your Web Page
Syllabus | Table of Pages | Assignments | References and Useful Links
This may just be the next big thing in typography for web developers...or just another source of client demands...?
I suggest that you pay attention to this one, regardless!
For those occasions when ordinary web fonts just won't do:
"Happy Valentine's Day, dearest Eloise...."
Google now hosts an open-source, free site to allow you to download and embed fonts on to a web page (Adobe and other sites have fonts, but these are restricted in annoying ways or have more cumbersome (slightly) coding demands.) Google fonts have the same availability as resident fonts on client machines, meaning that you may access these through the browser, with a small (ignorable) cost in download time. Here's how it works:
Google: The Google site is http://www.google.com/webfonts.
This takes you to a page where you can select any of (currently) 436 fonts:
You click on Add to Collection buttons for as many fonts as you want, and google assembles a simple link instruction, which you cut and paste into your page <head> section:
<link href='http://fonts.googleapis.com/css?family=Mrs+Saint+Delafield' rel='stylesheet' type='text/css'>
The external style sheet that google downloads looks like this:
@font-face {
font-family: 'Mrs Saint Delafield';
font-style: normal;
font-weight: 400;
src: local('Mrs Saint Delafield'), local('MrsSaintDelafield-Regular'), url('http://themes.googleusercontent.com/static/fonts/mrssaintdelafield/v1/vuWagfFT7bj9lFtZOFBwmkQ9lQTg7ma6s-K-LsDIgkk.woff') format('woff');
You then reference this in your style sheet or use the html style attribute, for example...
<p style="font:48px 'Mrs Saint Delafield', Times, serif;text-align:center;color:red;padding:10px;background-color:#fcc;">"Happy Valentine's Day, dearest Eloise...."</p>
Speed: Google cautions that too many requests per page may slow download time. There is an easy path to downloading only those characters that you will need, if you know that in advance (here).
I also suggest that you specify a 2nd choice font (e.g., here, Times) just in case something goes wrong with the use of the @font-face CSS property, which older browsers may not recognize.
Adobe: The Adobe site is http://www.adobe.com/type/webfont/info.html. I suggest that you keep track to see whether Adobe begins to deliver fonts as freely and simply as those from Google.