Fonts with LitElement

In HTML, fonts are typically applied using the CSS font-family property. This property can list one or more font families and each value can be specified as either a family name or a generic name.

font-family: "Gill Sans Extrabold", sans-serif;

Alternatively, fonts can be imported from an external CSS stylesheet.

render() { 
return html` <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">`;} 
}

There is also the capability to import fonts with a script tag if the font is in a JavaScript file. For our button project this is how we were able to import additional fonts that were not previously available when using the CSS font family property.

The imported script font can then be used like other font-family properties:

return css`
      :host {
        display: block;
        padding: 10px;
        color: var(--cta-btn-text-color, orange);
        font-family: Butcherman, fantasy;
        font-size: 30px;
      }`