Externally Sourced Fonts: Implementation in Lit vs. Vanilla JS Projects
Tags: css, design, webdev
Published: 2021-10-25 04:02:59

Fonts are a great way to tailor your web content to your intended audience through simple stylistic changes. These style adjustments are typically implemented via CSS, which has a series of predefined fonts that can be chosen from via the `font-family` attribute. However, fonts can also be *imported*, using resources such as [Google Fonts](https://fonts.google.com/) to access a vast library of custom fonts to make your text stand out. One consideration when importing these fonts is the way in which you do so, which can have a significant impact in whether the font is applied to your web page. 

###Importing with Vanilla JS
When using CSS in tandem with Vanilla JS, two options exist for importing a font from an external source: the `<link>` tag or an `@import` statement within an already linked CSS file. 

With the `<link>` tag, the reference to the external source where we are getting the font would be in our main page's HTML. By linking the external source as a stylesheet, we can then reference it in the CSS file we are already using to style our page. To reference the font we imported in our CSS file, we would simply place the name of the font at the beginning of the `font-family` rule. Google Fonts provides an already-formatted version of this process, giving both the necessary HTML and the CSS rule required to use a font.

*Example HTML for this implementation:*
![HTML Style Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfmzqrk4uybvge1dwwef.png)

*Example CSS Rule for this implementation, which is added to our project's CSS file:*
![CSS Rule with Font-Family](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09d5tv6gdjkwji61w1h9.png)

With the `@import` statement, we avoid editing the HTML by directly importing the needed font into our already-existing CSS file. We could then reference the font's name as we did in our other implementation by placing the name of the font at the beginning of the `font-family` rule. Google Fonts also provides a already-formatted version of this process, giving the necessary import statement and CSS rule required to use a font.

*Example of font import:*
![Imported CSS with Rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbx89rs9ar8m21wocigm.png)

The problem with a direct import to CSS, as shown above, is that it is a newer format that some frameworks do not account for. One such framework is [Lit](https://lit-element.polymer-project.org/guide#what-is-litelement).

###Importing with Lit
Given that Lit renders CSS differently from a Vanilla JS project, it has added sanitization measures that remove certain things from the embedded CSS. Unfortunately, one such thing is the `@import` command. This means that directly importing an external font into CSS is not currently supported in Lit. Instead, we have to use a `<link>` tag. To use a font within a specific component, this could be achieved by placing the font in the `font-family` CSS rule of the component's .JS file, then adding the necessary `<link>` tag to the HTML in index.html. Thus, the CSS renders with the HTML from the .JS file.

*Example HTML for this implementation, placed in index.html:*
![Lit Index.HTML Link to Font Stylesheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rwycfizngt3klm936j7.png)

*Example CSS Rule for this implementation, placed in JavaScript of yourComponent.js:*
![Lit CSS Rule with Font-Family](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpa5c60ak0knkn4d9xyr.png)


###Considerations When Rendering Fonts

####Font-Display
According to [CSS Tricks](https://css-tricks.com/almanac/properties/f/font-display/#:~:text=swap%20%3A%20Instructs%20the%20browser%20to,the%20auto%20and%20swap%20values), the `font-display` CSS property dictates how files, such as an externally-retrieved font, are downloaded and rendered. One possible option for the `font-display` property is `swap`, which immediately loads a local CSS font (the first available in the `font-family` property) until the imported font is downloaded and displayed. This initial font is called a *fallback*, and allows for the page to render notably faster than other options of font-display because the page is not stuck waiting for a font to use. The one caveat to this is that the page's font may briefly appear in an "unstyled" state, which could be undesirable to some developers.

####Rendering Methodologies
Rendering web pages can be done in a few different ways, and should be chosen based on the desired use cases for a developer's work. Google Developers has a useful [article](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) in which they break down five of the most common rendering methodologies, elaborating upon their pros and cons and when using each would be helpful. The following diagram provides a brief overview of the article's comparison:

![Google Web Dev Rendering Methodologies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kul2h28wu2uw7v9qqqd5.png)


***


**_Sources:_**
* [Google Fonts Sample](https://fonts.google.com/specimen/Roboto)
* [CSS Tricks font-display](https://css-tricks.com/almanac/properties/f/font-display/#:~:text=swap%20%3A%20Instructs%20the%20browser%20to,the%20auto%20and%20swap%20values)
* [Rendering on the Web Article](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)
* [Rendering on the Web Diagram](https://mobile.twitter.com/thinkLikeADev/status/1428729216800075776)