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">
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;
}
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.
Latest comments (0)