Maybe you've thought about fonts a lot or maybe you haven't at all, but if you're reading this chances are you've had to implement them in a project or will in the future, so allow me to share my font wisdom with you.
In my class, my group and I have been working on creating a web component "learning card" which is broken up into separate elements including the overall scaffolding of the card and a banner element comprised of a header, subheader, and icon as shown below.
Fonts can often make or break a reader's ability to understand the material so having a consistent one is important. For our lit element project, we found it was best to import a font from Google Fonts as it is hosted separately from our server simplifying the cross-browser support process. We did this by taking the link provided on Google Fonts and linking it in our index.html as shown below.
Then, within the body we styled it like any other element.
Swap allows you to set a back up font option in the event that your chosen font does not load. This is important so that the element can still render by swapping the chosen font for the fall-back font.
For the Stack Overflow post I followed, click here
To follow my group's progress, click here
Top comments (0)