Using web fonts can expand your typography options. In this video, look at how to incorporate web fonts into your projects.
- [Instructor] In the previous lesson, we talked about web-safe fonts. For more options, you can use web fonts. Because it doesn't require users to have fonts installed, we're not limited to only web-safe fonts. There are two methods: using an internal or external source. Internal font sources refer to downloaded font files, included in your project's directory just like any other file. Before you can use internal fonts in the CSS, you'll need to declare it within your style sheet and link to the font files using a method called @font-face.
Font-face is used to setup the font name and link to your font files. It starts with an at symbol, then font-face. The first declaration is font-family to declare the font name. You can use any value here, but it makes the most sense to give it the same name as the typeface. Next, use the src property to link to the actual font files. The syntax has to follow exactly what's listed here. Url, parentheses, and the exact name of the font file.
Sometimes when you download assets like fonts or images, the file names may not be descriptive. I would recommend renaming the files following the naming conventions discussed in the earlier lessons, just to stay organized. Once you've declared the downloaded font in your font-face declaration, you can add it to the font stack just like any other web-safe font. Let's take a moment to review navigating file directories. Previously, we talked about linking to files from the HTML page, making index.html the starting point.
To link to files in either the CSS or images folder, just add the folder name followed by a forward slash, then the file name. Now let's say you have a folder called fonts to organize all of your font files. Styles.css is now your starting point, since you're adding the font-face declaration to the CSS file. This file is inside of a folder, so you'll have to navigate up and out of it first. The first step is to use a ../ to move up and out of the CSS folder.
Then add fonts/ to move into the fonts folder, then the font file name. The ../ is always used to move up and out of a folder regardless of the folder name. Going into a folder is always defined by the folder name. Different browsers support different file formats. For most browsers, the WOFF and WOFF2 formats are supported. To list multiple font files, add a comma between each URL value. To learn more about font-face and support for older browsers, check out this article by CSS-Tricks.
There are detailed examples for different levels of browser support, if you need to support older browsers. If you don't have these different file types, fontsquirrel.com has a free font generator. Click on the Generator tab. Upload the font file that you do have, and it will use that file to generate all the different file types. Fonts have various licensing guidelines for its usage, so be sure to go over any included read me files or licensing info before using it.
The second option for using web fonts is using an external source, which are third-party services. With this option, you don't need to download any files, or include them in your project's directory. You can link directly to their font CSS files which are hosted online as part of the service. There are paid services such as Typekit that will give you access to high quality fonts. If you're looking for a free option, Google Fonts has a fairly good selection.
You can browse through the page and filter by these different categories, and if you know your font name, you can also just do a search here. Click the plus icon to add the font to your collection, or select the minus icon to remove it. Your selections are added to the drawer at the bottom of the page. There's no limit to how many fonts you can use, but using too many will slow down the page load, and two fonts is pretty standard, maybe three depending on the complexity of your design.
We'll be using Google Fonts in the upcoming exercise, so I'll go into more detail about using this service in that lesson. For now, take a moment to choose two Google or web-safe fonts for your project or just use the same as my sample project. I'll be using Open Sans, and Caveat.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property