What is `@font-face` and how to use it

@font-face is a CSS rule that allows you to define custom fonts to be used on your webpage. This means that you can use fonts that are not necessarily installed on the user's device, ensuring a consistent design across different platforms and browsers. Here's how to use the `@font-face` rule:


    @font-face {
        font-family: 'MyCustomFont';
        src: url('fonts/MyCustomFont.woff2') format('woff2'),
             url('fonts/MyCustomFont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    
    body {
        font-family: 'MyCustomFont', sans-serif;
    }