Replace main font of theme with custom font

Hey there,

Do have things consistent I’ll update the answers on stackoverflow because I asked there first but didnt get a reply yet.

So I hope its ok if i post the link to the question with code details: click me

My problem is that I want to override the font of the midnight-scheme with a custom one but I can’t get it to work.

1 Like

It works with normal text but doesnt cover headers etc. Is there a way to overwrite all fonts at once?

Hi @larsgvb!

It took me a second to think through everything that’s happening here, but I think I have the answer for you.

First, the short answer to your question “is there a way to overwrite all fonts at once?” Is essentially to use the !important flag, like you wound up doing in your stackoverflow thread.

The reasons for this are as follows. When you want to customize the CSS for your Pages site, you add the following lines to the top of your assets/docs/assets/css/style.scss:

---
---

@import "{{ site.theme }}";

What this does is import the entirety of your theme’s CSS rules into your file. In this case you’re using the Midnight theme, and those CSS rules can be found here:

https://github.com/pages-themes/midnight/blob/d4a980479c4128bc84b0498d709b8850c670c6c7/_sass/jekyll-theme-midnight.scss

Every rule you add under it goes at the bottom of your CSS file as a result, and because of the way that CSS works, if your new CSS rule will only overwrite existing rules when it has greater specificity.

So, if you’d like to change the font-family declaration, you’ll either need to use the !important flag like you wound up doing, or you’ll need to overwrite every CSS rule that uses the font-family declaration in your theme’s CSS.

Does that answer your question?

You can find font related customization in _sass/_variables.scss

For more details visit here.