What is the best way to replace the existing font with a new font?

[soumendrak]

I want to use Atkinson hyperlegible for my regular text on my website. I did not find a doc on how to install a custom font. Please help.

[welpo]

Good choice!

To customise the font, you'll need (1) add the font to your static directory and (2) load a CSS file to override the tabi defaults. For example:

@font-face {
    src: local('Atkinson Hyperlegible'),
        url('/fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format("woff2");
    font-family: 'Atkinson Hyperlegible';
    font-display: swap;
}

:root {
    --serif-font: 'Atkinson Hyperlegible', serif;
}

You can load this file in two ways: with stylesheets or with skins. They are functionally identical, provided you set stylesheets in config.toml.

The CSS assumes the font file is at static/fonts/.

Hope that helps!

[welpo]

I tested the setup I suggested earlier and it loaded the font fine.

Does the browser try to load the file? I'd check for loading errors (e.g. a 404 when getting the font). Does the custom css have the expected content? If you try to manually navigate to 127.0.0.1:111/fonts/Atkinsons…, does it load the font, or does it 404? Is the name on the CSS the exact name of the woff2 file?

If you're using a subdirectory, you may need to change the local path on the font to remove the first slash (so url('fonts/…).

[soumendrak]

I see the font is working when I go inside a content page like this.
However, the homepage and section pages, need to be fixed. Also, I do not see any error.

• Website source code

[welpo]

Interesting! I'll do a deep dive later and report back.

P.S: Thank you so much for my first GitHub sponsorship! It means a lot~

[welpo]

Ah, right!

tabi uses three fonts: one for headers / main page (sans serif), one for article/page content (serif), and one for code.

The defaults are:

--sans-serif-font: 'Inter', Helvetica, Arial, sans-serif;
--serif-font: 'Source Serif', 'Georgia', serif;
--code-font: 'Cascadia Code';

You'll need to override each variable separately. If you want to use the same font everywhere (except code) I see two options:

• Override the CSS variable sans-serif-font to match serif-font;
• Only override serif-font and set override_serif_with_sans = true in your configuration (docs)

Either option should achieve your goal!

[soumendrak]

Thanks, I went with the first option.

For future readers,
this is my final CSS file:

@font-face {
    src: local('Atkinson Hyperlegible'),
        url('/fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format("woff2");
    font-family: 'Atkinson Hyperlegible';
    font-display: swap;
}

:root {
    --serif-font: 'Atkinson Hyperlegible', serif;
    --sans-serif-font: 'Atkinson Hyperlegible', serif;
}