Let’s take a look at web typography!

1. Websafe fonts

Here are some examples of websafe fonts. These fonts will always work, and don’t require anything fancy other than calling them out in the CSS. These fonts are often useful as
fallbacks. A fallback is a back up font in case your custom font doesn’t work. Add it after your custom font in the CSS like this: font-family: "Crimson Text", serif;
Times
Arial
Courier
Georgia
Verdana
Serif This and sans-serif below are generic tags that display the user’s default serif and sans serif fonts.
Sans Serif

Instructions

  1. Link your font in the css, like this
                  font-family: "times";

2. Google Fonts

You can use the open source collection of fonts on Google Fonts.
Here I’m using Crimson Text.

Instructions

  1. First find a font.
  2. Next, click on “select this font” in the top right.
  3. Add the link href tag to the head of your document. 
                          <link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
  4. Call out your font in the css using the font family with the fallback provided. 
                        font-family: 'Crimson Text', serif;

3. Custom fonts — Purchase

You can use any font you want online, you just need to get the right files. If you purchase the webfont directly from a foundry, the instructions and assets will be supplied to you.

Here I’m using Burgess.

Instructions

  1. Purchase a font.
  2. Download the folder which will contain the font in a variety of formats: eot, woff, woff2, and ttf
  3. Paste the type assets into your project’s directory. For example: in this project, the fonts are saved in assets/fonts
  4. Copy and paste the @font-face asset from the "stylesheet.css" file into your CSS directory. Note, depending on your foundry, this might be called something else 
                         @font-face {    font-family: 'burgess-regular';
    src: url('../fonts/burgess-regular.eot');
    src: url('../fonts/burgess-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/burgess-regular.woff') format('woff'),
         url('../fonts/burgess-regular.woff2') format('woff2'),
         url('../fonts/burgess-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  5. Change the source to point to your local directory and change it in all urls. For example, I had to move out of "css" and into fonts.
  6. The font-family is what you’ll use to name the font when you call it out in your css.
  7. Call out your font in your CSS. 
                            .burgess {
  font-family: "burgess-regular", serif;
}
  8. Side note: all these different formats (eot, ttf, etc.) are fallbacks for a variety of browsers. The most modern way of working is using only woff and woff2. So, you can get away with just using those.

3. Custom fonts — Convert Files

You should always purchase your fonts, and you should definitely always make your clients purchase your fonts. Sometimes, however, you have a font and you want to test it out online and can’t purchase it right away, or a web version doesn’t exist yet. You can generate the files you need using an alternate type format. You also might try searching github and see if someone has an existing typeface online. Here’s a handy site.
Here I’m using Big Caslon.

Instructions

  1. First find your font.You need either a TTF or OTF file. If you don’t have that, try converting the file on cloudconvert first.
  2. With your TTF or OTF file, head on over to a webfont generator
  3. Convert your file and download the package.
  4. Like in the previous example, paste the font files into your project’s local directory. On this example, I’m saving it under assets/fonts.
  5. Open the stylesheet (stylesheet.css) provided. Cut and paste this into your main stylesheet. 
                            
@font-face {
    font-family: 'BigCaslon-Medium';
    src: url('../fonts/BigCaslon-Medium.woff2') format('woff2'),
        url('../fonts/BigCaslon-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
  6. Like in the previous example, replace the source to be where our local directory is.
  7. Call out your font in the CSS as in the previous example 
                            
.bigcaslon {
    
  font-family: 'BigCaslon-Medium';
}
That’s it! Now you’re a pro.