Watch video on YouTube

Azul Coding
How to Self-Host Fonts on Your Website

Sections:

CSS

/* AZUL CODING --------------------------------------- */
/* How to Self-Host Fonts on Your Website */
/* https://youtu.be/9t1CYJ7rfuk */


/*
If you're using a font from Google Fonts, you can download the WOFF2 files here:
https://fonts.googleapis.com/css?family=<font name>
*/

@font-face {
    font-family: 'Font Name';
    font-style: normal;
    font-weight: 100 900;
    src: url("/fonts/font-normal.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: 'Font Name';
    font-style: italic;
    font-weight: 100 900;
    src: url("/fonts/font-italic.woff2") format("woff2");
    font-display: swap;
}

body {
    margin: 30px;
    background-color: #03506E;
    color: white;
}
:root {
    font-family: 'Font Name', sans-serif;
}

Help support the channel

Subscribe

HTML

<!-- AZUL CODING --------------------------------------- -->
<!-- How to Self-Host Fonts on Your Website -->
<!-- https://youtu.be/9t1CYJ7rfuk -->


<!DOCTYPE html>
<html>
    <head>
        <title>Azul Coding</title>

        <!-- consider adding a font preload to improve performance -->
        <link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Azul Coding</h1>
        <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></p>
        <p>Quisque molestie massa non augue placerat, vitae scelerisque felis cursus. Pellentesque suscipit euismod lorem vitae luctus. Pellentesque maximus arcu at facilisis luctus. Suspendisse vitae mauris semper, aliquam massa eu, posuere enim. In hac habitasse platea dictumst. Morbi volutpat rhoncus nisi, vitae ornare nunc elementum id. Integer est tellus, varius vitae congue quis, luctus id nunc. Praesent rutrum risus ligula, id gravida tortor ultrices eu. Phasellus ut lacinia enim, ut tempus ante. Etiam tristique justo lacus, varius consectetur tortor laoreet ut. Cras maximus hendrerit purus vel convallis. Sed non elementum lectus. Mauris fermentum scelerisque elementum.</p>
    </body>
</html>

Discover more

4 Open-Source Windows and Android Apps

Visit Express Apps

Learn a New Language for Free With No Ads

Visit Ablas

Royalty-Free Landscape Photos for Your Project

Visit Quetzal
More videos