DEV Community

yuellian
yuellian

Posted on

Fonts in Lit

Fonts are an important factor when creating a web application. They play an important role when it comes to the appearance of your website.

Typically, to access fonts, you can write your own code or use a third party service.

Font Family

p {
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

Traditionally, fonts can be applied using HTML's font-family property. The system will traverse through the list of font-family values until it finds the one the coder identified. The downside is that the font choices are limited.

You can also import fonts in your CSS file. You can either use the CSS @import or HTML tag.

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

Fonts in Lit

Importing a third party font is not supported in Lit. We have to use a tag in order to access the font.
First, you would have the create the font-family attribute in the CSS file.
Then, you would have the tag in the head of index.html.

Discussion (0)