There are some basic fonts found on all Windows machines, and others found on all Macs. These should be included near the end of your font stack if they are not your first choice.
|Serif||Times New Roman||Times|
Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use a lesser-known font such as Gill Sans—make that your first choice—but also control to some degree what the browser shows if a user does not have Gill Sans installed on their machine.
- A font stack is comprised of two or more fonts separated by commas.
- Fonts with more than one word in the name need double quotes around them.
- The fonts are ordered by first choice followed by lesser-desired choices.
- The font stack typically ends in a generic call to the type of font desired, such as “serif” or “monospace”. This is a last-chance effort to control the font style.
- There are operating systems other than Windows and Mac, such as Linux. They may have the fonts you specify earlier in the stack, but will certainly have some basic serif, sans-serif and monospace fonts.
font-family: “Gill Sans”, Arial, Helvetica, sans-serif;
Early Web Font Systems
There are a number of systems out there that have been used for creating custom web fonts. The ones below are old and now considered out-of-date, but you should know about them.
Scalable Inman Flash Replacement (sIFR) dates back to 2005. sIFR embeds a font in a Flash element that displays the text, pre-empting the need for a font to have been manually pre-installed on a user’s system. Unlike graphical text (for example, an image file created by Photoshop,) sIFR text can be scalable withour pixelation, and it can be selected on the screen.
A disadvantage in using Cufón is the requirement that the embedded font’s license allow its distribution in unencrypted form, which many commercial fonts expressly forbid.
Modern Web Fonts
EXERCISE: USING GOOGLE FONTS
A Google font is used for all of the headings on this website. Google fonts are free, are very easy to use, and can assure that everyone can see just the font you chose. There are hundreds of fonts available, and more are added all the time.
The drawback? You cannot use just any old font you want to with this technique.
- Download and unzip the basic site folder linked below. It contains a page of content about web fonts. The page is linked to a stylesheet that has two rules with no declarations yet, one for body and one for all the headings. You will be selecting a Google font for each of those two purposes and implementing them in your HTML and CSS.
- Rename the site folder as google-fonts.
SELECTING GOOGLE FONTS
- Check out the link below and navigate around to appreciate the variety of fonts available from Google. You’ll notice that as you scroll down, more are added to the bottom of the list.
- Go through and look at a bunch of the available fonts. Select a decorative one for your headings, and click the blue Add to Collection button for it. Select a plainer, more legible font for your main body copy, and add it to your collection.
- Click on the Review button in the bottom-right corner of your browser window.
You have the option to display either one as Paragraph or Headline text.
If you don’t like what you’ve chosen, click the Choose button, remove a font or two, and select other(s).
GETTING THE GOOGLE FONT CODE AND INSTALLING IT ON YOUR SITE
- When you have two great fonts that work well together, click the Use button in the bottom right. Don’t simply use the same fonts I chose.
- Scroll down and look at boxes 3 and 4.
- Copy the line of code from box 3 and paste it into the <head> element of your index.html file. This code links to the stylesheets for your fonts on Google’s web server.
- Create a site definition for your google-fonts folder in Dreamweaver.
- Define a font stack for each of the CSS rules in your stylesheet. Use fonts which are similar to your Google Font choices. Remember to use quotes around font names with more than one word in them. Don’t simply one the ones in my example. Try the Font Stack Builder in the link below.
USING THE GOOGLE FONTS IN YOUR CSS
- Add your Google Font names at the beginning of your font stacks.
- Test index.html in a browser.
- Adjust your font sizes, colors and margins so that your fonts look really good. Again, don’t simply use my settings. Decide what looks best for your font choices.
The @font-face CSS technique allows you to upload font files on your own site and refer to them in your stylesheets. There are many ways to accomplish this, so I will just show you a couple.
FontSpring sells typefaces, and you can buy them in packages with or without the webfont files. Below is a link to the display page for Primca Nova, one of the fonts they sell which is currently very popular with web designers:
If you purchase the webfont files, you get the font with the following file extensions (as well as the OpenType files for print):
- eot—Embedded OpenType, for Internet Explorer
- svg—Scalable Vector Graphic, for Safari, Chrome and Opera
- ttf—TrueType Font, for Firefox, Safari, Chrome and Opera
- woff—Web Open Font Format, for most modern browsers, but not the older ones
These are the file formats you need to upload for each of the font faces you intend to use. They provide @font-face support for most versions of most browsers in use today. I keep them all in a folder named webfonts within my site folder.
Then you need to do two things in your stylesheet. First, write the @fon-face rules for each of the typefaces you plan to use. The @font-face rule for each typeface has a declaration for each file type available for the browsers.
Having given each of your typefaces a name in the @font-face rules, go ahead and start using those names in your regular CSS font stacks, as you would with any other font name.
Because you have theoretically purchased and now own these fonts, you avoid any typeface piracy or licensing issues.
Font Squirrel has two main features which are free. One feature allows you to download any one of over seven hundred fonts for commercial use.
Each one has a distinct license arrangement so be sure to read up on them.
Several of these fonts have a link for the @font-face kit. You would get to download each of the font file types recommended for cross-browser support.
If you want to view only the fonts they have which offer @font-face kits, click the @font-face Kits link in the main menu.
You may also upload fonts from your own computer. Click the @font-face Generator link in the main menu.
To stay on the safe side of the law, make sure to only upload fonts from your machine that you know you have licensing for.
EXERCISE: USING FONT SQUIRREL
- Download and unzip the basic site folder linked below. This is the same file you downloaded before for Google Fonts, so if you still have that ZIP file, unarchive/extract it again. You will be selecting fonts on your computer and implementing them in your HTML and CSS.
- Rename the site folder as fontsquirrel.
- Find two fonts on your computer which you would like to use, one for headings and one for paragraphs. One way to do this is to open Microsoft Word and experiment with how fonts look there. Make note of the names of the fonts you want to use.
- Go to the @font-face Generator page at FontSquirrel.com.
- Click on the Add Fonts button, navigate to one of the font files you have chosen, and click OK.
- On the PC: fonts can typically be found in C:\Windows\Fonts. You may need to copy-and-paste from here onto the desktop so that FontSquirrel can see the files.
- On the Mac: fonts can typically be found in /System/Library/Fonts/.
In some cases you may need to select a different font because the copyright holder has not agreed to this kind of licensing:
When you’ve successfully uploaded a font for conversion, it will be listed under the Add Font button.
- Get both of your fonts uploaded, select the Optimal radio button, and check the Agreement checkbox (in the real world, make sure you are on the right side of the law.)
- Click on Download Your Kit.
- Wait for the fonts to be generated, then save the ZIP file that is offered for download.
- Unzip the ZIP file and take a look at the files you’ve been given.
- Note that you’ve also been given a couple of HTML files and a stylesheet as demos. Take a look at the HTML files in a browser, and stylesheet.css in Dreamweaver.
- Create a site definition for your fontsquirrel folder in Dreamweaver.
- Copy the two @font-face styles from the stylesheet.css file provided by Font Squirell into the styles.css file located in your fontsquirrel folder.
- Locate each of the .eot, .svg, .ttf, and .woff files provided by Font Squirrel. Copy and paste them into a new folder named webfonts in your fontsquirrel folder.
- Back in styles.css, add the webfonts folder name to the paths of the font files (look for the url() values.)
- As before, create font stacks for your body and headings. Then add the respective font names from your @font-face rules at the beginning of each stack.
- Test index.html in a browser. Make sure your web fonts are appearing. If not, fix your code.
- As before, add some CSS to make your text look really good.
Sites With Beautiful Type
Find three websites with beautiful typography. Include the urls and explain why you picked them.