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 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:
Example CSS Rule for this implementation, which is added to our project's CSS file:
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:
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.
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:
Example CSS Rule for this implementation, placed in JavaScript of yourComponent.js:
Considerations When Rendering Fonts
Font-Display
According to CSS Tricks, 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 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:
Sources:
Top comments (0)