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="" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode


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


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)