DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

christine kinahan
christine kinahan

Posted on

The Concept of Fonts

A concept from this week that is near and dear to my heart is fonts. I love design and fonts just put the perfect touch onto a project. This concept is something I was having trouble with in my first project, as our button was Halloween themed and I couldn't get my creepy font to work. I wish I had this blog post then.

How to Implement Fonts in Lit
You can implement fonts in LitElement by importing a font like Google font. This would be done in the HTML portion of your code and would look like this:

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

Source: https://stackoverflow.com/questions/57489637/how-to-load-google-font-in-litelement

How to Implement Fonts in a General Setting
In a general setting, I would implement a font by using a font-family in CSS while styling. For example, if I wanted to use a cursive font, I would use this font-family:

.cursive {
  font-family: cursive;
}
Enter fullscreen mode Exit fullscreen mode

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

Why the Difference?
The main difference to me with using an imported font vs. a css font-family is that you can get a lot better fonts when they are imported. For example, with my Halloween button project, I imported a font so that it was extra spooky.

Top comments (0)

Why You Need to Study Javascript Fundamentals

>> Check out this classic DEV post <<