Fonts went from a handful to thousands seemingly overnight back in 2010. That was made possible by the introduction of @font-face in CSS3.
Embedded Web Fonts
The @font-face is a means to of linking to fonts on your server much like you would link to any other resource. The @font-face rule was actually part of CSS version 2.0 back in 1998, but it was dropped in CSS2.1, and is now back in CSS3, and as every browser supports them; its caught on like wildfire.
The real stumbling block was not the technology, but the licensing of fonts. Downloading an embedded font downloads the actual artwork itself, and font foundries were not about to give away their intellectual property. This was not a problem as long as fonts were served by the operating system that took care of the licensing.
CSS Code View
Time’s Up!
The time had come for the type foundries to figure a way out of the legal quagmire, for they were faced with the immanent release of CSS3 and @font-face, which would have opened up the floodgates to competing royalty free font services like Google Web Fonts. They, of course, found a way.
Just’n Time!
The most common manner in which type foundries control access to their font faces is by serving the fonts themselves. They do this in a number of ways. Linotype, the largest type foundry representing many thousands of fonts, runs fonts.com, a clearing house for a number of foundries.
The Good News
Thousands of their fonts are free to use below a certain threshold (25,000 hits per month). Once you set up an account, you create a project and can then select from many of their fonts, designating a selector that will link up the fonts to your document though a line of code that you put into your header. You can see the use of Smuts Clogged. They provide you with a line of code that you put into the header of your document. All that remains to be done is to create elements with an attribute that match the designated selectors, and their server takes care of the rest, in this case, Smutz Clogged for the header type and Century Gothic for the paragraph.
Another benefit is that these fonts are served up fast. After purging my cache in Safari, this page has 1020.61kb worth of fonts (compare that to 25.25kb for the document, 760.15kb for the stylesheets, 884b for the images and 375.62kb for the scripts, for a total page size of a 2.131mb) and yet the fonts took 1.93 seconds to load (compared that with 950ms for the document, 3.04s for the stylesheets. 1.85s for the images and 1.03s for the scripts, for a total of 4.82 seconds). As most of the CSS came from typekit.com, it may have contained a font as a stylesheet, but that speed is still impressive enough to not worry about the overhead of using interesting fonts.
The Bad News
The bad news really isn’t so bad. They place a fonts.com button on the side of your page. If you can live with that, you have world class fonts at your fingertips.
CSS Code View
Google Fonts
And then there is Google Web Fonts. There are only a few hundred fonts, not thousands, but that may get you close enough, and there is no button to put up with.
The library is growing very quickly, so expect that it will be a very robust source of web fonts in a few years. Google has created a very nice interface to try out your fonts and to style them, and it even lets you compile them into projects and you can bookmark them for later reference.
Wouldn’t you know it, but they even have a handy font previewer plugin for Chrome that lets you preview what a web page would look like in any one of their fonts, and generate the required code on the fly, so you can easily drop one of their fonts into your project.
CSS Code View
Adobe Edge Fonts
Adobe Edge Fonts is a free font service that provides access to a large library of fonts for your web site.
To use these fonts, add a JavaScript tag to the
of your page, then reference a font-family in your stylesheet. There are currently about 500 font families to choose from. More if you pay.Choice
There are other type foundries, such as TypeKit, which really pioneered the approach that commercial foundries now use, like Linotype above. They have since been bought up by Adobe. You can sign up for access to the fonts that they have, and like Linotype, for free they give you access to fewer fonts and you have to put up with their logo, but it partially covers the linotype logo, so that’s some consolation.
Too Few Fonts?
The bigger problem is that you are only allowed two font families at one time for free with Typekit, which may or may not be a problem, as that includes all of the different weights and styles. That makes the two font family limit much less of a problem. This is an example of the eight different styles: light and light italic, regular and regular italic, medium and medium italic, bold and bold italic.
@font-face
Using @font-face. The first CSS Code View shows the @font-face rules that connect the style sheet to the resources for three fonts, in the same way that an image would link. The second CSS Code View applies these fonts.
CSS Code View
CSS Code View
DIY @Font-Face
FontSquirrel provides the actual font resources so you can serve the fonts yourself using the @font-face. Instead of subscribing and letting the foundry serve your fonts, you download the fonts and make them available just as you would any other resource, like an image, for example. It comes as a package with font resources, a CSS style sheet and an example HTML file, so its easy to use and is pretty self explanatory.
If it looks a bit overwhelming, it is because there are five different formats that cover all browsers and devices. These will all be replaced with a single woff format sometime sooner than later, but till then, everyone is happy. I documented what the files are in the Gesso Font. Included is a bold variation of the Carto Gothic Standard font that can be activated by increasing the font-weight to 700.
Font Generator
FontSquirrel provides an online font generator as well, allowing you to turn your own hand-crafted fonts into the different web formats. This is a very powerful tool, just make sure that you obay all of the licensing issues so that you don’t step on anyone’s toes. This means that you could turn non-web fonts into web fonts as long as they provide a license for you to do so.
Other Foundries
There are other type foundries offering fonts for free and for a price, usually a yearly subscription fee, and I am sure that the number of fonts will grow: FontSpring, Exljbris, Typotheque, Font Shop, Font Deck, Webfonts.info.
What an embarrassment of riches after the starvation diet we lived on for so many years. Enjoy! The web is just waking up to this possibility, and its your for the taking. Visit Fonts in Use if you need more inspiration.
CSS Font Properties
Font Properties determine what the letterform of the character looks like. There are a number font properties that can be used individually (and many more waiting to be implemented by the browsers): font-style; font-variant; font-weight; font-size; line-height; font-family.
CSS Code View
These values are assigned by multiple individual properties.
The shorthand remains most popular font: , after which come values for the following properties in this exact order: font-style; font-variant; font-weight; font-size; line-height; font-family.
CSS Code View
These values are assigned by a single font shorthand property.
You add the values together with spaces, except for the font size/line height which has a slash, and the font-family, which separates the fonts with commas.
The line-height is to be specified along with the font size with a slash between, as in 1em/120%. Then comes the font family, which goes from the primary font to a backup font should the primary font be missing, to a generic serif or san-serif font if all else fails. Fonts with names of more than one word, like ‘Times New Roman’ require single or double quotations marks.
There are a number of peculiar conventions you have to observe: The family name has to come last, right before the size, and if you include the line height, you need to do that as shown, with a forward slash. Another anomaly is when you use a unit after the line height, it is a fixed value for inherited values. If you use no unit after the line height, the value is multiplied, and goes up and down with the size of the font in the children.
Complications when Sizing Fonts
The absolute way to set the size of a font is to set it in a fixed measurement, like pixels. Relative sizing of fonts is preferred, however, because of the flexibility in changing font sizes, and once upon a time, the ability to change the layout size, when the text and layout were not yet treated as one. Here is a demonstration where this flexible layout measurement based on the em runs into problems.
CSS Code View
These are four nested divs, with the text in each child being sized by 80%, or .8em, which is the same thing. Notice that this is cumulative, and that can cause problems keeping track of the font size when creating complicated layouts with multiple nested elements. Ideally you have a well defined hierarchy, where all the fonts are related in size, and this feature creates problems. What to do?
Recognizing this problem, CSS3 released the REM, a master flexible width, so to speak. Rem stand for root em, meaning a relative type unit that keeps its size based on the size defined for the root. Where the em unit is relative to its parent, meaning the type and the other elements kept getting smaller, the rem unit is relative to the root element, and keeps the same proportion, as demonstrated below.