How to use Custom Fonts in LWC

During your development career there might be some scenarios where you need to use custom fonts in LWC. There are some clients who are very specific about font, image or color specifications used in the client-facing pages.

Today in this tutorial we are going to see how easy it is to use custom fonts in lwc using static resources.

Step 1: Download the custom font from the internet.

For our example, we will be downloading a font called Great Vibes from 1001freefonts.com. Make sure to check the licencing of fonts before using it in your project, some font may not be free for use.

Step 2: Upload the zip file containing the fonts in the static resource.

A zip file will be download once we click on the Download icon in the font website.

If we extract the zip file we can see its content, in our example we have a font file called GreatVibesRegular.ttf. Font files are of two types truetype (ttf) & opentype (otf), our folder has a font of .ttf type.

Note: Make sure to note down the name of the font file with the extension, this will be used in our CSS file.

Let’s now upload the zip file that we downloaded from the fonts website in the static resource.

Step 3: Load the fonts in the css file of your LWC component from the static resource.

CSS Code of LWC

@font-face {
    /*
       We are creating a custom font in css and giving it a name.
       This name can be used to assign fonts to elements in the CSS.
    */
    font-family: "CustomFont";
 
    /*
        This is the location of the Custom Font, note, I have stored in a ZIP file
     */
    src: url('/resource/mycustomfont/GreatVibes-Regular.ttf') format('TrueType');
 }

 .textHeader{
    font-size: xx-large;
    font-family: "CustomFont"; /*using the custom font name we mentioned above*/
    text-align: center;
    color:#021174;
 }

 .textBody{
    font-family: "CustomFont"; /*using the custom font name we mentioned above*/
    font-size: 25px;
    color:#910808;
 }
 .background{
    background-image: url('/resource/floralbackground');
    background-size: cover;
 }

In the first line of the CSS file we are declaring a custom font by using the @font-face tag then giving it a name with font-family property and assigning the source of the downloaded font (in static resource) in src property.

We can now use our custom font by using the name we have given in font-family property. Like in our example below. We are setting the font-family to the custom font name we created in the @font-face tag. Now any element in the HTML which will use textBody as it class, its inline text will be formatted in the syle of the font downloaded.

.textBody{
    font-family: "CustomFont"; /*using the custom font name we mentioned above*/
    font-size: 25px;
    color:#910808;
 }

HTML Code of LWC

<template >
    <div class="background" style="padding:32px;width:374px;height:500px">
        <div class="textHeader">
                Welcome
        </div>
        <div class="textBody">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            
            <div style="text-align: right">
                Thanks, <br/>
                Gourav Bhardwaj
            </div>
        </div>
    </div>
</template>

Final Result

The above image is the final result of the font used and what it looks like. We have also given the div a background and some CSS styling to the text, to make the who learning process interesting. If you want to learn how to place a background image in div, read this article.

Do let us know your thoughts in the comment box below and share this article with your friends. Make sure to subscribe to our blog and get notified of new content being created.