# About
xz/fonts is a free and [open source](https://en.wikipedia.org/wiki/Open_source) service for delivering font families to websites using CSS. Typically, web developers use custom fonts on their websites using one of two methods:
1. Hosting font files on the same server as the website
2. Using a central font service, such as Google Fonts or Adobe Typekit
xz/fonts, by comparison:
1. serves font files through [jsDelivr](https://github.com/jsdelivr/jsdelivr)'s global content delivery network
2. is open source and only serves open souce fonts
We're on GitHub at [xz/fonts](https://github.com/xz/fonts).
## Just want to see the fonts?
{% content-ref url="/pages/-M49o9PafMamEKcDlYSM" %}
[Fonts](/fonts)
{% endcontent-ref %}
## How do I get started?
{% content-ref url="/pages/-M49mA6WCsHTFxhUqwot" %}
[Usage](/usage)
{% endcontent-ref %}
# Usage
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 `` tag in your site's ``
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 [Fonts page](/fonts). Next, choose the `@import` tab.
You'll find a snippet of code that looks something like this:
```css
@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.
{% hint style="info" %}
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.
{% endhint %}
Here's an example of what your CSS could look like:
```css
@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 `` method
Select a font from the [Fonts page](/fonts). Next, choose either the `` tab.
You'll find a snippet of code that looks something like this:
```markup
```
Copy that line. Next, paste the rule in your site's ``. Ideally, this should be placed before your stylesheet, but it will work anywhere inside the ``.
Here's an example of what your `` could look like:
```markup
Lorem Ipsum Dolor
```
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.
{% hint style="info" %}
It's important that the `font-family:` rule is declared before you use the font.
{% endhint %}
Here's an example of what your CSS could look like:
```css
body {
font-family: 'Inter', sans-serif;
}
h1,h2,h3 {
font-size: 3rem;
}
p {
color: #666666;
}
```
Congrats, you're done! Be sure to include the `` tag in the `` and reference your stylesheet everywhere you'd like to use the font.
## Having issues?
Don't worry! Open an issue at [xz/fonts/issues](https://github.com/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`.
# Fonts
Agave
{% content-ref url="/pages/-M49oCTtX5f6zgu\_KHXG" %}
[Agave](/fonts/agave)
{% endcontent-ref %}
## Anonymous Pro
{% content-ref url="/pages/-M49srQNtw081Mmm82i6" %}
[Anonymous Pro](/fonts/anonymous-pro)
{% endcontent-ref %}
## Cascadia Code
{% content-ref url="/pages/-M49u5J0JR3aEbNqJ0Go" %}
[Cascadia Code](/fonts/cascadia)
{% endcontent-ref %}
## Fira Code
{% content-ref url="/pages/-M49uKQC1EjBA8mooYM1" %}
[Fira Code](/fonts/fira/fira-code)
{% endcontent-ref %}
## Fira Sans
{% content-ref url="/pages/-M49uNdF36QIyDHwLAst" %}
[Fira Sans](/fonts/fira/fira-sans)
{% endcontent-ref %}
## Hack
{% content-ref url="/pages/-M49uR3gJ\_Qw\_bpurlWi" %}
[Hack](/fonts/hack)
{% endcontent-ref %}
## HK Grotek
{% content-ref url="/pages/-M9BEcUYhsBlDG4pEeAe" %}
[HK Grotesk](/fonts/hk-grotesk)
{% endcontent-ref %}
## IBM Plex Family
{% content-ref url="/pages/-M49ueLYgnOgmzEiqv6Y" %}
[IBM Plex](/fonts/ibm-plex)
{% endcontent-ref %}
## Inter
{% content-ref url="/pages/-M49ufljAGyxU\_9P7Obr" %}
[Inter](/fonts/inter)
{% endcontent-ref %}
## JetBrains Mono
{% content-ref url="/pages/-M49uhxRH8jcyp0e-PWE" %}
[JetBrains Mono](/fonts/jetbrains-mono)
{% endcontent-ref %}
## Liberation Family
{% content-ref url="/pages/-M49ujkvP62\_TD8ERh4P" %}
[Liberation](/fonts/liberation)
{% endcontent-ref %}
## Merriweather
{% content-ref url="/pages/-M9BPoLc4mdva4KwDHcd" %}
[Merriweather](/fonts/merriweather)
{% endcontent-ref %}
## Metropolis
{% content-ref url="/pages/-M9BPJ-\_sc5F2TMM32l9" %}
[Metropolis](/fonts/metropolis)
{% endcontent-ref %}
## mononoki
{% content-ref url="/pages/-M49upKynFXTMxtaw6HY" %}
[mononoki](/fonts/mononoki)
{% endcontent-ref %}
## NeverMind
{% content-ref url="/pages/-M9BH9dPTV88wkQJFSAj" %}
[NeverMind](/fonts/nevermind)
{% endcontent-ref %}
## Plus Jakarta Sans
{% content-ref url="/pages/-M9BG6nChkp6WJ-8cxJv" %}
[Plus Jakarta Sans](/fonts/plus-jakarta-sans)
{% endcontent-ref %}
## Prodigy Sans
{% content-ref url="/pages/-M9BFM\_S9TZ1Wxq\_P-i1" %}
[Prodigy Sans](/fonts/prodigy-sans)
{% endcontent-ref %}
## Open Sans
{% content-ref url="/pages/-M49utBj8zRsylWBGO7f" %}
[Open Sans](/fonts/open-sans)
{% endcontent-ref %}
## Roboto Family
{% content-ref url="/pages/-M49uuqFzj4dC4VPmfZg" %}
[Roboto](/fonts/roboto)
{% endcontent-ref %}
## Source Code Pro
{% content-ref url="/pages/-M49uvnN\_63UzLAR-OsP" %}
[Source Code Pro](/fonts/source-code-pro)
{% endcontent-ref %}
## Space Mono
{% content-ref url="/pages/-M49uyxmeQWTylje32d1" %}
[Space Mono](/fonts/space-mono)
{% endcontent-ref %}
# Agave
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/agave.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Agave', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
# Anonymous Pro
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/anonymous-pro.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Anonymous Pro', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
* *Normal Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
# Cascadia Code
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/cascadia-code.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Cascadia Code', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
# Fira
The Fira family consists of two variants:
{% content-ref url="/pages/-M49uKQC1EjBA8mooYM1" %}
[Fira Code](/fonts/fira/fira-code)
{% endcontent-ref %}
{% content-ref url="/pages/-M49uNdF36QIyDHwLAst" %}
[Fira Sans](/fonts/fira/fira-sans)
{% endcontent-ref %}
# Fira Code
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/fira-code.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Fira Code', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Light (300)
* Normal (400)
* Medium (500)
* **Bold (700)**
# Fira Sans
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/fira-sans.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Fira Sans', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Extra Bold (800)**
* ***Extra Bold Italic (800)***
* **Black (900)**
* ***Black Italic (900)***
# Hack
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/hack.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Hack', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
* *Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
# HK Grotesk
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/hk-grotesk.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'HK Grotesk', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Extra Bold (800)**
* **Black (900)**
# IBM Plex
The IBM Plex family consists of three variants:
{% content-ref url="/pages/-M49vGbslKfhj\_7SUQza" %}
[IBM Plex Mono](/fonts/ibm-plex/ibm-plex-mono)
{% endcontent-ref %}
{% content-ref url="/pages/-M49vLjtIK8Mr-RVpMY0" %}
[IBM Plex Sans](/fonts/ibm-plex/ibm-plex-sans)
{% endcontent-ref %}
{% content-ref url="/pages/-M49vNIW8ieybPIr0nH3" %}
[IBM Plex Serif](/fonts/ibm-plex/ibm-plex-serif)
{% endcontent-ref %}
# IBM Plex Mono
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/ibm-plex-mono.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'IBM Plex Mono', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
# IBM Plex Sans
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/ibm-plex-sans.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'IBM Plex Sans', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
# IBM Plex Serif
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/ibm-plex-serif.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'IBM Plex Serif', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
# Inter
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/inter.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Inter', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Extra Bold (800)**
* ***Extra Bold Italic (800)***
* **Black (900)**
* ***Black Italic (900)***
# JetBrains Mono
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/jetbrains-mono.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'JetBrains Mono', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Extra Bold (800)**
* ***Extra Bold Italic (800)***
# Liberation
The Liberation family consists of three variants:
{% content-ref url="/pages/-M49vSrT\_z6qrSlXAQRp" %}
[Liberation Mono](/fonts/liberation/liberation-mono)
{% endcontent-ref %}
{% content-ref url="/pages/-M49vUMNzw198N3VTzna" %}
[Liberation Sans](/fonts/liberation/liberation-sans)
{% endcontent-ref %}
{% content-ref url="/pages/-M49vVsuk-E32ci-GWCn" %}
[Liberation Serif](/fonts/liberation/liberation-serif)
{% endcontent-ref %}
# Liberation Mono
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/liberation-mono.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Liberation Mono', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
* *Normal Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
# Liberation Sans
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/liberation-sans.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Liberation Sans', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
* *Normal Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
# Liberation Serif
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/liberation-serif.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Liberation Serif', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
* *Normal Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
# Merriweather
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/merriweather.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Merriweather', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Black (900)**
* ***Black Italic (900)***
# Metropolis
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/metropolis.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Metropolis', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Extra Bold (800)**
* ***Extra Bold Italic (800)***
* **Black (900)**
* ***Black Italic (900)***
# mononoki
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/mononoki.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'mononoki', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal (400)
* *Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
# NeverMind
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/nevermind.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'NeverMind', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
# Open Sans
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/open-sans.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Open Sans', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Italic (400)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Extra Bold (800)**
* ***Extra Bold Italic (800)***
# Plus Jakarta Sans
The Plus Jakarta Sans family consists of two variants:
{% content-ref url="/pages/-M9BGA5XkGy-EvrZXfZl" %}
[Plus Jakarta Display](/fonts/plus-jakarta-sans/plus-jakarta-display)
{% endcontent-ref %}
{% content-ref url="/pages/-M9BGMgHGLBPnB25nCjc" %}
[Plus Jakarta Text](/fonts/plus-jakarta-sans/plus-jakarta-text)
{% endcontent-ref %}
**Plus Jakarta Display** is best for large headings and titles, while **Plus Jakarta Text** has small adjustments for smaller text sizes.
# Plus Jakarta Display
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/plus-jakarta-display.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Plus Jakarta Display', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Italic (400)*
* Medium (600)
* *Medium Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
# Plus Jakarta Text
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/plus-jakarta-text.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Plus Jakarta Text', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
# Prodigy Sans
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/prodigy-sans.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Prodigy Sans', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Extra Bold (800)**
* ***Extra Bold Italic (800)***
* **Black (900)**
* ***Black Italic (900)***
# Roboto
The Roboto family consists of four variants:
{% content-ref url="/pages/-M49v\_2BpGmefAPmWsR\_" %}
[Roboto Standard](/fonts/roboto/roboto-standard)
{% endcontent-ref %}
{% content-ref url="/pages/-M49vgFQV6rVv1zwDrsg" %}
[Roboto Condensed](/fonts/roboto/roboto-condensed)
{% endcontent-ref %}
{% content-ref url="/pages/-M49vhTn\_T7sPsmRG7bQ" %}
[Roboto Mono](/fonts/roboto/roboto-mono)
{% endcontent-ref %}
{% content-ref url="/pages/-M49viXsZj1ynPLM93kC" %}
[Roboto Slab](/fonts/roboto/roboto-slab)
{% endcontent-ref %}
# Roboto Standard
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/roboto.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Roboto', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* **Bold (700)**
* ***Bold Italic (700)***
# Roboto Condensed
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/roboto-condensed.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Roboto Condensed', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Italic (400)*
* **Bold (700)**
* ***Bold Italic (700)***
# Roboto Mono
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/roboto-mono.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Roboto Mono', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* *Thin Italic (100)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* **Bold (700)**
* ***Bold Italic (700)***
# Roboto Slab
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/roboto-slab.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Roboto Slab', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Thin (100)
* Extra Light (200)
* Light (300)
* Normal (400)
* Medium (500)
* Semibold (600)
* **Bold (700)**
* **Extra Bold (800)**
* **Black (900)**
# Source Code Pro
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/source-code-pro.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Source Code Pro', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Extra Light (200)
* *Extra Light Italic (200)*
* Light (300)
* *Light Italic (300)*
* Normal (400)
* *Normal Italic (400)*
* Medium (500)
* *Medium Italic (500)*
* Semibold (600)
* *Semibold Italic (600)*
* **Bold (700)**
* ***Bold Italic (700)***
* **Black (900)**
* ***Black Italic (900)***
# Space Mono
## Installing
{% tabs %}
{% tab title="@import" %}
At the top of your primary CSS file, insert:
```css
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/space-mono.min.css");
```
{% endtab %}
{% tab title="" %}
At the bottom of your `` tag, insert:
```markup
```
This tag needs to be inserted in all HTML documents in which you'd like to use the font.
{% endtab %}
{% endtabs %}
## Usage
To use this font in your CSS:
```css
font-family: 'Space Mono', sans-serif;
```
## Styles
This font supports the following weights and styles:
* Normal
# Font Sources
A huge thank-you goes out to every artist who has decided to publish their fonts as open source projects. You're helping to keep the internet independent and free!
* Agave \[]
* Anonymous Pro \[]
* Cascadia Code \[]
* Fira Code \[]
* Fira Sans \[]
* Hack \[]
* iA Writer Family \[]
* IBM Plex Family \[]
* Inter \[]
* JetBrains Mono \[]
* Liberation Family \[]
* Mononoki \[]
* Open Sans \[]
* Roboto Family \[]
* Source Code Pro \[]
* Space Mono \[]