Easy way to change the font to local file via CSS

[stamyx]

Hi,

i am wondering if there is a way to change the font family for the Headings and the Paragraph to locally hosted fonts. I already copied the two fonts to static/fonts/ but now I don't know how to import them into my custom.css.

Thanks in advance!

[nunocoracao]

Hello @stamyx , to replace the font you should do 2 things:

1. place the font in the static folder as you've done, I would also place it within a folder called fonts.
2. create a custom.css file so that you can override the stylesheet, final structure will look like this:

.
├── assets
│   └── css
│       └── custom.css
...
└─── static
    └── fonts
        └─── font.ttf

3. import the new font using the newly created custom.css and apply it to the elements you wish (example below does it for html):

@font-face {
    font-family: font;
    src: url('/fonts/font.ttf');
}

html {
    font-family: font;
}

After your suggestion I've also added these instructions to the docs

[bob3x255]

Hi @nunocoracao!

I think it doesn't work that way if one builds the theme CSS from source.

For some reason, ./assets/css/custom.css does not apply custom styles. I tried changing CSS in .themes/blowfish/assets/css/main.css, it applied custom styles, however, not custom font. I did everything by the steps written above except that I made corresponding changes in main.css instead of custom.css.

Is there any difference with custom font setting in such case?
Trying to understand what I am doing wrong. Any help is appreciated!

[nunocoracao]

Hello, @bob3x255 the custom.css is always included unless you override the head file.
here is the line that includes the custom.css if it exists. So no, there shouldn't be a difference. If you are changing the main tailwind files and recompiling them I would advise checking the tailwind docs on how to change the font. It might be easier since you are already messing with the theme at a very low-level.