Fonts

Fonts are used via the font-family CSS property, like

body {
    font-family: "Courier New", Courier, monospace;
}

If no custom font or web safe font is included, it’s recommended to use the generic font family (serif, sans-serif, monospace, cursive) as fallback.

Instead of using web safe fonts or generic families it’s possible to import specific fonts.

Embedding font files

The code below will embed the fonts Montserrat and Vollkorn, which are placed in a folder fonts next to the folder css.

You can insert the code into style.css or create a new file like fonts.css and import it in your head:

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Writing an own website</title>
        <link rel="stylesheet" href="css/fonts.css">
        <link rel="stylesheet" href="css/style.css">
    </head>

Added into style.css or fonts.css:

/* Montserrat */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Regular.otf');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Italic.otf');
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Bold.otf');
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-BoldItalic.otf');
  font-style: italic;
  font-weight: bold;
}

/* Vollkorn */

@font-face {
  font-family: 'Vollkorn';
  src: url('../fonts/Vollkorn/Vollkorn-Regular.woff2');
  font-style: normal;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../fonts/Vollkorn/Vollkorn-Italic.woff2');
  font-style: italic;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../fonts/Vollkorn/Vollkorn-Bold.woff2');
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../fonts/Vollkorn/Vollkorn-BoldItalic.woff2');
  font-style: italic;
  font-weight: bold;
}

Then we can use this fonts inside our stylesheet as we used web safe fonts before:

body {
    font-family: 'Vollkorn';
    font-size: 1.5em;
}

h1, h2 {
    font-family: 'Montserrat';
}

If available, the format woff2 is recommended, followed by woff and otf and ttf.

Import fonts

It’s more convenient to import fonts via a link tag in the head. If you don’t mind delivering data (from your visitors) to Google (see lifehacker and Google Fonts FAQ), you can insert a font via their font repository.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

See this article for an introduction.

It’s possible to use the work done by Google without connecting all the time with them. Opening the link (https://fonts.googleapis.com/css?family=Open+Sans) will open CSS code like the one above, for e.g.

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

We could save this code as fonts.css, then manually download the fonts from the given url’s and change the url path according to our folder structure.

The benefit of writing your own website is that you can control these things.