Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS: Use @font-face To Use Custom Fonts

Friday, June 11, 2021

CSS: Use @font-face To Use Custom Fonts

By using @font-face declaration you can use custom fonts in your web pages.  The way this works is that you can host the fonts on your server, and then the user agent will download the font for future renders, for example you can specify the following markup to use a custom font that's not widely available.

@font-face{
    font-family: "Verana";
    src: url("Verana-Regular.otf");
}

You can get the free fonts here at Arkandis Digital Foundry to play around with custom fonts.
The url can be a local resource within the local server, or a remote resource on the internet.



The way you would use the font-face is just like a regular font:

 h2 {font-family: Verana; font-size: 24pt;}










Here is the entire HTML markup:

<html>
    <head>
        <style>
            @font-face{
                font-family: "Verana";
                src: url("Verana-Regular.otf");
            }

            h2 {font-family: Verana; font-size: 24pt;}
        </style>
    </head>
    <body>
        <h2>Verana Font</h2>
    </body>
</html>

Previous: CSS Parent Child Selectors

 at

No comments:

Post a Comment