DEV Community

jmgiannetti
jmgiannetti

Posted on

Implementing Fonts in Lit

The class was assigned the task of creating learning cards based on the example below.

Image description

Google Fonts

Importing fonts allows the group to custom build the task in order to add their own personality while staying somewhat professional in presentation. Google fonts is a common choice and they have several types that you can choose from. The best part is that importing google fonts is very simple all you need is the code below

After you have the font package implemented then you can style the text using options such as font-family, font-display, margin, padding, size, color, etc...

Incase of an issue the swap feature allows you to set a backup font so that everything can still render. Without that you might end up looking at a blank screen without text if there is a loading issue.

https://github.com/IST402-Group-F/Project-2-Card

The link above connects to our repo if you would like to check it out!

Top comments (0)