How to Install Fonts3:20 with Hope Armstrong
Now that we have some general knowledge about typography, let’s install some shiny, new fonts and look at what to consider when choosing a typeface.
- Google Fonts - large directory of free fonts, all available as web fonts
- Adobe Fonts - unlimited for those with a Creative Cloud subscription
- Font Squirrel - free, even for commercial use. mixed quality.
- MyFonts Top Web Fonts - large directory of fonts
- Lost Type - high-quality fonts, some available pay-as-you-want for personal use
[MUSIC] 0:00 With all this talk about fonts, 0:05 you're probably itching to get some new ones of your own. 0:06 You're probably familiar with the standard set of fonts that come on your computer. 0:10 These are called system fonts and Android, iOS, Windows, and 0:15 Mac each have a different selection. 0:20 These are immediately usable on your computer, 0:23 although there's a relatively small selection. 0:26 If you do decide to design with those system font, 0:30 when it's time to develop it with code, you can either find a web font that allows 0:33 everyone to see the font, even if they don't have it installed or 0:37 you can create what's called a font stack in your code. 0:42 It's a list that tells the browser which fonts to use. 0:46 For example, you may prefer Helvetica, which is available on all Macs but 0:49 not all Windows computers. 0:54 So you can add Ariel as a fallback 0:57 which is available on nearly every Windows computer. 1:00 Luckily system fonts aren't the only option. 1:03 There are tons of fonts available for download and they're easy to install. 1:07 Here's how to install a font. 1:13 Find a font foundry, or a font distributor website. 1:15 Then sort by the features you are looking for, more on that later. 1:19 When you find the one, download and install it on your computer. 1:24 You may notice there is more than one file per font style. 1:47 This can happen if there are different formats. 1:51 Here are the common font formats OpenType, TrueType, 1:55 EOT, WOFF, WOFF2, and SVG. 2:01 Files with an OTF extension are open type fonts. 2:06 This is the preferred format because it includes the most customization options, 2:10 and has widespread support across platforms. 2:15 Files with a TTF extension are true type fonts, 2:18 this is what was used before the open type format. 2:22 While they still work well, they don't have the extras that open type fonts have. 2:27 Files within EOT extension use a format created by Microsoft. 2:33 They're meant to be used on the web, however, 2:37 they only work in Internet Explorer. 2:40 WOFF files are the preferred format for web fonts. 2:44 These files are compressed which means they load faster. 2:47 WOFF2 is a newer iteration of WOFF, 2:50 the difference is that they're more compressed. 2:55 It's well supported across all the major browsers. 2:57 If you're targeting Internet Explorer or older browser versions, 3:01 WOFF has the most support. 3:05 SVG fonts are not recommended 3:07 unless you're trying to support very old versions of Safari. 3:11 Check out the teacher's notes for websites where you can find fonts to download. 3:16
You need to sign up for Treehouse in order to download course files.Sign up