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

3 comments:

  1. Assignment helpJuly 22, 2026 at 9:17 AM

    This was a really informative and thoughtfully written post, and I appreciate the time and effort you put into creating such valuable content. The information is presented in a clear and engaging way, making it easy for readers from all backgrounds to understand and enjoy. While exploring educational resources online, I often come across Dissertation Writing Services as a useful option for students seeking reliable academic guidance and research support. Thank you for sharing such excellent content, and I look forward to reading more of your future posts!

    ReplyDelete
  2. johnAugust 3, 2026 at 2:31 AM

    A 400 Amp Electrical Panel is a powerful and reliable solution for residential, commercial, and industrial properties with high electrical demands. Designed to handle increased power loads, a 400-amp electrical service is ideal for large homes, multi-family buildings, offices, warehouses, and facilities that use electric vehicle (EV) chargers, HVAC systems, solar power, backup generators, and other energy-intensive equipment.
    400 Amp Electrical Panel in Indianapolis, IN
    400 Amp Electrical Panel in Seattle, WA

    ReplyDelete
  3. help on assignmentsSeptember 17, 2026 at 8:22 AM

    Really appreciate this well-written article; the information is clear, informative, and genuinely helpful for understanding the topic better. I especially liked how the key points were explained in a simple and practical way, making the content easy to follow and useful for readers. Resources like this, along with Professional Assignment Help, can provide valuable guidance when exploring topics in greater depth.

    ReplyDelete