How to use local custom font?

support
1

Hello!
Firstly I want to apologise in advance if this was solved before. I was looking around the forums and saw people address it but I haven’t managed to get mine working with the advice provided.

I am trying to use a font that I have downloaded locally as the font family for the whole site.

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

I have my css file located in static/css/style.css and my font is in static/fonts/Jomhuria-Regular.ttf.

Thanks!

2

In theory it shall work, but couple advices.

Do not use TTF fonts. For website use WOFF2 main and fallback to WOFF.

Your font declaration missing the right format(‘truetype’).

@font-face {
    font-family: "Jomhuria";
    src: url('/fonts/Jomhuria-Regular.ttf') format('truetype');
}

TTF are fonts for OS and Apps, not really good for web. All major browsers support it but for performance purposes is not advised to use.

Then of course you need to call it to use it like

body {
font-family: Jomhuria, sans-serif;
}
1 Like
3

Thanks for the advice! I was unaware of the different formats. Seems my issue was just that i forgot to apply it in font-family woops. Thanks for the help!

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.