Snippets Collections
@font-face {
    font-family: Asap;
    src: url('/fonts/Asap-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
    font-style: normal;
}

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

@supports (font-variation-settings: normal) {
    @font-face {
        font-family: Asap;
        src: url('/fonts/Asap-VariableFont_wght.woff2') format('woff2 supports variations'),
            url('/fonts/Asap-VariableFont_wght.woff2') format('woff2-variations');
        font-weight: 400 700;
        font-display: swap;
        font-style: normal;
    }
}
star

Fri Apr 16 2021 12:53:31 GMT+0000 (Coordinated Universal Time) https://bnijenhuis.nl/notes/2021-04-13-how-to-add-self-hosted-variable-fonts-to-your-website/?utm_source=markboulton&utm_medium=email

#variable #font #asap #self-hosting

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension