Transcript Web font

VISUAL QUICKSTART GUIDE
HTML and CSS
8th Edition
Chapter 13: Working with
Web Fonts
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.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Working with Web Fonts
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.
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, widelysupported standard designed for use as a web font.
– TrueType or OpenType font that has been compressed.
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.
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.
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.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Where to Find Web Fonts
• Two options for using web fonts in a website: selfhosting 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.
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
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Font Squirrel
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.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Google Fonts
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.
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.
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.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Download a Web Font from
Font Squirrel
• Go to Font Squirrel (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.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
PT Sans Fontface Kit
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.
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.
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.
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.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Copy Font Files to Folder that
Contains the Style Sheet
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.
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 @fontface 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.
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 @fontface rule so it is the same as in the other rules for the
font.
• Change the font-weight value in the bold text @fontface rule to font-weight: bold. Save your changes.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Italic and Bold with a Web Font
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 @fontface 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.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Bold Italic with a Web Font
Faked effect
Proper font
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.
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.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
The Glory of Web Fonts
LEARN THE QUICK AND EASY WAY!