Usage
Each font can be installed in one of two ways:
Inserting an
@importrule at the top of your primary CSS fileInserting a
<link>tag in your site's<head>
Assuming you have a CSS file that is loaded across all pages of your website, the @import method is recommended, as only one file change is needed to have the font loaded globally.
Using the @import method
@import methodSelect a font from the Fonts page. Next, choose the @import tab.
You'll find a snippet of code that looks something like this:
Copy that line. Next, paste the rule at the very top of your site's primary CSS file.
To reference the font in your CSS, scroll down on the font's page. There is a guide of how to add the font-family rule and the available weights and styles.
Here's an example of what your CSS could look like:
Congrats, you're done! Be sure to reference this stylesheet everywhere you'd like to use the font.
Using the <head> method
<head> methodSelect a font from the Fonts page. Next, choose either the <head> tab.
You'll find a snippet of code that looks something like this:
Copy that line. Next, paste the rule in your site's <head>. Ideally, this should be placed before your stylesheet, but it will work anywhere inside the <head>.
Here's an example of what your <head> could look like:
Next, you need to reference the font in your CSS. Scroll down on the font's page; there is a guide of how to add the font-family rule and the available weights and styles.
Here's an example of what your CSS could look like:
Congrats, you're done! Be sure to include the <link> tag in the <head> and reference your stylesheet everywhere you'd like to use the font.
Having issues?
Don't worry! Open an issue at xz/fonts/issues. I'd be happy to help you out.
Still having problems or need to get in contact with me directly? Send an email to exampledev at protonmail dot com.
Last updated
Was this helpful?