LogoLogo
Main SiteGitHubTwitter
  • About
  • Usage
  • Fonts
    • Agave
    • Anonymous Pro
    • Cascadia Code
    • Fira
      • Fira Code
      • Fira Sans
    • Hack
    • HK Grotesk
    • IBM Plex
      • IBM Plex Mono
      • IBM Plex Sans
      • IBM Plex Serif
    • Inter
    • JetBrains Mono
    • Liberation
      • Liberation Mono
      • Liberation Sans
      • Liberation Serif
    • Merriweather
    • Metropolis
    • mononoki
    • NeverMind
    • Open Sans
    • Plus Jakarta Sans
      • Plus Jakarta Display
      • Plus Jakarta Text
    • Prodigy Sans
    • Roboto
      • Roboto Standard
      • Roboto Condensed
      • Roboto Mono
      • Roboto Slab
    • Source Code Pro
    • Space Mono
  • Font Sources
  • Links
    • GitHub
Powered by GitBook
On this page
  • Using the @import method
  • Using the <head> method
  • Having issues?

Was this helpful?

Usage

PreviousAboutNextFonts

Last updated 4 years ago

Was this helpful?

Each font can be installed in one of two ways:

  1. Inserting an @import rule at the top of your primary CSS file

  2. Inserting 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

Select a font from the . Next, choose the @import tab.

You'll find a snippet of code that looks something like this:

@import url('https://fonts.xz.style/serve/inter.css');

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.

It's important that the rule is declared before you use the font. This is why placing the import tag at the top of your CSS is recommended.

Here's an example of what your CSS could look like:

@import url('https://fonts.xz.style/serve/inter.css');

body {
	font-family: 'Inter', sans-serif;
}

h1,h2,h3 {
	font-size: 3rem;
}

p {
	color: #666666;
}

Congrats, you're done! Be sure to reference this stylesheet everywhere you'd like to use the font.

Using the <head> method

You'll find a snippet of code that looks something like this:

<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css"> 

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:

<head>
	<meta charset="UTF-8">
	<title>Lorem Ipsum Dolor</title>
	<meta name="author" content="Jane Doe">
	<meta name="description" content="Ut enim ad minim veniam">
	<meta name="keywords" content="lorem,ipsum">
	<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
	<link rel="stylesheet" href="index.css"> 
</head>

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.

It's important that the font-family: rule is declared before you use the font.

Here's an example of what your CSS could look like:

body {
	font-family: 'Inter', sans-serif;
}

h1,h2,h3 {
	font-size: 3rem;
}

p {
	color: #666666;
}

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?

Still having problems or need to get in contact with me directly? Send an email to exampledev at protonmail dot com.

Select a font from the . Next, choose either the <head> tab.

Don't worry! Open an issue at . I'd be happy to help you out.

Fonts page
Fonts page
xz/fonts/issues