# Fonts
Fonts are used via the `font-family` CSS property, like
```css
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`:
```html
Writing an own website
```
Added into `style.css` or `fonts.css`:
```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:
```css
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](https://www.lifehacker.com.au/2018/06/how-to-be-gdpr-compliant-if-you-use-google-fonts-on-your-website/) and [Google Fonts FAQ](https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users)), you can insert a font via their font repository.
```css
```
[See this article](https://css-tricks.com/snippets/css/using-font-face/) 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.
```css
/* 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.