1. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 13: Working with Web Fonts

2. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Use web fonts on webpages. Work with @font-face rule. Choose between web font file formats. Understand the legal issues around licensing fonts. Find web fonts. Download web fonts. Work with multiple web fonts. Style web fonts and manage file sizes. Add italic and bold to web fonts.

3. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Working with Web Fonts

4. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE What Is a Web Font? Web font: A font on a server for use in a webpage. @font-face CSS rule allows CSS to link to a web font on a server for use in a webpage. Web fonts have been around since 1998, but it was nearly a decade before browsers supported them.

5. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Web Font File Formats and Browser Support Embedded OpenType (.eot): Web font file format used by IE8 and earlier with @font-face. TrueType (.ttf) and OpenType (.otf): Standard font file types used for desktop computers. Scalable Vector Graphics (.svg): Format used in special situations where other formats aren’t supported, such as earlier versions of mobile Safari. Web Open Font Format (.woff): Newer, widely- supported standard designed for use as a web font. –TrueType or OpenType font that has been compressed.

6. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Legal Issues With @font-face, browsers can link to and download a font, whether purchased or not. Make sure fonts are properly licensed for the web. –Most foundries and font services offer licensing with purchase or à la carte. –Information often mentioned on foundry’s website. –When in doubt, contact foundry to see what they allow. Alternatively, restrict fonts to free ones. –Free fonts available at Font Squirrel’s free @font-face generator.

7. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Managing File Size Web fonts need to be downloaded to the user’s computer before they can be rendered on the webpage, slowing down the website considerably, especially for mobile users. Be prudent when choosing web fonts, and look for ways to consolidate your font choices.

8. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Subsetting Subsetting is a way to trim the size of the actual font by including only the characters you know you will use. You can also select language-specific subsets for many fonts.

9. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Where to Find Web Fonts Two options for using web fonts in a website: self- hosting and web font services. –Both are perfectly valid, but quite different options. –Not all web fonts are available everywhere. May require finding a close substitute or rethinking approach. It pays to be flexible and to weigh all your options before committing to a direction.

10. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Self-Hosting Self-hosting web fonts: Fonts that are served up from own server. –More traditional approach. –One-time purchase. –Up to you to upload font files and include code on site. Some of the more popular ones are: –Font Squirrel –MyFonts –The League of Moveable Type –FontShop

11. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Font Squirrel

12. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Web Font Services Web font services: Subscriptions to web fonts. –Pay monthly or annually for rights to use fonts. –Services hosts the font. –Gives a piece of JavaScript or CSS code for webpages. –Cheaper than purchasing fonts outright. Offer more features than self-hosting. –Everything is hosted on the server, including font files. –Services can easily upgrade font files and code. Some popular web font services: Typekit, Fontdeck, Fonts.com, WebINK, and Google Fonts.

13. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Google Fonts

14. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Icon Fonts and Where to Get Them Icon fonts are web fonts that have icons instead of letters, numbers, and punctuation. You can style them with the same CSS you use for styling text. No matter what font-size value you use, an icon font will scale nicely and look sharp, making them a better option than icon images.

15. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Web Font Quality and Rendering There can be noticeable differences in how web fonts look across web browsers. –Some fonts just don’t look good in earlier versions of Internet Explorer. Some fonts look better at some sizes than at other sizes. They might be too frail and become difficult to read when used for body text, or lack authority at heading size. When selecting fonts, do your best to vet potential web fonts by examining how they will look in a variety of browsers.

16. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Downloading Your First Web Font Downloading a free web font is quick and easy. Font Squirrel even provides a demo.html file for you to see how these fonts look in action.

17. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Download a Web Font from Font Squirrel Go to Font Squirrel (www.fontsquirrel.com).www.fontsquirrel.com From the font’s page, choose Webfont Kit. Deselect the SVG option under Choose Font Formats. Choose the subset for the font. Click the DOWNLOAD @FONT-FACE KIT button, and your download should begin. Once the download is finished, open the ZIP archive. Your folder should contain at least one web font file (likely more), plus three other files.

18. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE PT Sans Fontface Kit

19. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To View the Selected Fonts in the demo.html File Open the demo.html file from the downloaded font in your browser. This demo file shows that the web font works.

20. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Understanding the @font-face Rule @font-face syntax is different from traditional CSS. –Doesn’t follow traditional format of selector followed by property/value pairs. –A @font-face rule sets up a tool that can be used by the rest of CSS. This rule doesn’t affect the style of any specific element, but does allow web fonts for CSS. First line is for font family. –Establishes name for this particular web font. Next few lines tell browser where font files live. –Include font file formats that give support to all different browsers that support web fonts.

21. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Styling Text with a Web Font There are a few methods for using web fonts in a style sheet. One is the way Font Squirrel does it, as shown in stylesheet.css and demo.html. Other way reflects how you style text with regular fonts, is easier to manage, and provides the appropriate fallback if the web font fails to load. –Potential limitation: If you use more than a total of four weights and styles of a single web font family—not of all web font families in your page—Internet Explorer 6–8 might convert certain weights to regular (normal) weight.

22. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use a Web Font to Style Text Open the stylesheet.css file that you downloaded from Font Squirrel. If it includes an @font-face rule for regular text, copy and paste it into your style sheet, and save the file. Copy the font files from the Font Squirrel folder to the folder that contains your style sheet. Rename the font-family value so its name is generic to the font. Create rules to style text elements as desired.

23. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Copy Font Files to Folder that Contains the Style Sheet

24. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Applying Italics and Bold with a Web Font Web fonts come in only one weight and one style per font file. To use bold or italic, you need to create separate @font-face rules for them, each referencing their own web font. Otherwise, the browser may apply faux bold or faux italic.

25. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Italic with a Web Font Open the stylesheet.css file from Font Squirrel. If it includes an @font-face rule for italic text, copy and paste it into your style sheet. Copy the italic font files from the Font Squirrel folder to the folder that contains your style sheet. Rename the font-family value in the italic text @font- face rule so it is the same as in the rule for regular text. Change font-style value in the italic text @font-face rule to font-style: italic. Save your changes.

26. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Bold with a Web Font Follow steps 1–3 for applying italic, but paste the @font-face rule for bold text into your style sheet and copy the bold font files to your folder. Rename the font-family value in the bold text @font- face rule so it is the same as in the other rules for the font. Change the font-weight value in the bold text @font- face rule to font-weight: bold. Save your changes.

27. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Italic and Bold with a Web Font

28. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Bold Italic with a Web Font Follow steps 1–3 for applying italic, but paste the @font-face rule for bold italic text into your style sheet and copy the bold italic font format files to your folder. Rename the font-family value in the bold text @font- face rule so it is the same as in the other rules for the font. Change the font-weight value in the bold italic text @font-face rule to font-weight: bold. Also, change the font-style value to font-weight: italic. Save changes.

29. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Bold Italic with a Web Font Faked effectProper font

30. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using Web Fonts from Google Fonts Google Fonts is one of several web font services that host the web fonts for you. It saves you the trouble of creating or modifying any @font-face rules. It has become a popular choice because it’s free, has hundreds of fonts, and allows you to add a web font to your page in less than a minute once you know how it works.

31. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use a Web Font from Google Fonts To use a web font from Google Fonts: –Browse for a font. Select Add to Collection. –Scroll to the bottom of the page and click Use. –Select only the weights and styles you intend to use. –Select only the character sets your content requires. –Copy link element code and paste into head of webpage. –Style your text with web font by using the font-family name specified by Google Fonts. Set the font-weight to one of the weights you selected. If it’s an italic web font, set font-style: italic; in your CSS rule as well. –Save your HTML page and style sheet.

32. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE The Glory of Web Fonts