In order to use custom fonts in CSS, you need to follow these steps:
1. First, you need to have the custom font file. It can be one of several file types (.ttf, .otf, .woff, .woff2 or .svg).
1. Then, you place the custom font files on your website server.
1. After you’ve placed your fonts files in the server, you use the `@font-face` rule in your CSS file to specify the path to the font file on your server.
For example:
```
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘path_to_your_font/MyCustomFont.woff2’) format(‘woff2’),
url(‘path_to_your_font/MyCustomFont.woff’) format(‘woff’);
}
```
In this CSS snippet, the `font-family` property defines the name that you’ll use to refer to this font elsewhere in your CSS (in this case ‘MyCustomFont’). The `src` property is telling the web browser where to find the font file(s).
Note: The .woff and .woff2 formats are most commonly supported across all browsers, and they offer good compression for smaller file sizes.
1. Now, you can use the font throughout your CSS file by calling the `font-family` you have set:
```
body {
font-family: ‘MyCustomFont’, sans-serif;
}
```
Here, ‘MyCustomFont’ is the custom font and ‘sans-serif’ is the fallback font, if the custom font is not loaded for any reason, the browser will use ‘sans-serif’.
It’s crucial to note that you should respect the licensing restrictions of fonts when using them on your website. The font must be available for web use, unless it’s a font which you’ve designed and own yourself.
