Is it possible to overwrite the font?

[AntoniosBarotsis]

I have currently added the following in my own scss file:

* {
  font-family: '...' !important;
}

Which works fine, but, the hack font is still downloaded, wasting some amount of time on the initial page load. Is that something I could change without making changes to the theme's code itself?

Edit: I realize that this might be more of a zola question than a theme question but I couldn't find anything in the docs so I'm just asking here for now.

[marcospb19]

I believe you have to change the theme code itself, yes.

[pawroman]

It's not that hard to change this, the theme would have to basically expose an extra switch.

I would be glad to accept this as a contribution, e.g. a true by default switch to enable the Hack font (e.g. config.extra.use_hack_font).

See https://github.com/pawroman/zola-theme-terminimal/blob/master/templates/macros/head.html#L22-L26

Or, an alternative approach -- wrap all the font styles in a named block which could be overridden by theme users. But there, I'm not sure how it would interact with the macros. Would have to test this approach, and if it works -- could introduce named blocks for all elements of the headers.

[AntoniosBarotsis]

So I tried commenting out lines 22-26 completely but running zola build still puts all the fonts in my newly created public folder. That shouldn't be happening right 🤔

[AntoniosBarotsis]

This would probably work fine if we completely removed the fonts from the static folder and imported them like I do here (in retrospect, I am not even sure if this is even needed, anything UI related is not my strongest area 😅) and add the remote urls in a scss file (like here) instead of pointing them to the fonts/ folder.

The scss file would work the same way you are now choosing between the hack font subset or opting in to the full one here.

It could look something like this:

{%- if config.extra.use_full_hack_font %}
    <link rel="stylesheet" href="{{ get_url(path="font-hack.css", trailing_slash=false) | safe }}">
{% else if config.extra.remove_hack_font %}
  <!-- if remove_hack_font -> include no css file -->
{% else %}
    <link rel="stylesheet" href="{{ get_url(path="font-hack-subset.css", trailing_slash=false) | safe }}">
{% endif -%}

I think having the hack font be opt-out is better so as to not break everyone's blogs with the new update; you would have to change your config only to remove the font, otherwise everything should stay the same, hence the remove_hack_font.

Let me know your thoughts!

Edit: As a clarification, my github pages fonts folder does indeed not include my chosen font (FiraCode) as it is being loaded from a CDN instead.

[AntoniosBarotsis]

An update on this, I made the changes in my fork here and used it in my blog.

Without changing anything:

1. The static/fonts folder was no longer there
2. font-hack-subset.css was included (checked this via the browser sources tab

Setting remove_hack_font = true in my blog's config.toml removes the font-hack-subset.css file.

Is this something that would work for you as well? Maybe it's a good idea to check manually this time 😅, I've modified a bunch of files on my blog and there's some inconsistencies sometimes with the original.

[pawroman]

@goingforbrooke was working on adding a new/custom font. Maybe you could work on a "proper" way forward here together?

I wouldn't oppose adding support for custom fonts to the theme.

[pawroman]

(See #69)

[AntoniosBarotsis]

Ok so, after spending the better part of the last half an hour trying to remember what I was even doing when making those changes, it turns out none of that was needed 😅

I have overwritten index.scss with the following:

@font-face {
  font-family: 'Fira Code';
  font-style:  normal;
  font-weight: 400;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/ttf/FiraCode-Regular.ttf") format("woff");
}

@font-face {
  font-family: 'Fira Code';
  font-style:  normal;
  font-weight: 800;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/ttf/FiraCode-Bold.ttf") format("woff");
}


* {
  font-family: 'Fira Code' !important;
}

That is all you need to overwrite the font apparently. I am not sure what the issue was the first time I tried but after checking the network tab, it looks like the only font that gets downloaded is Fira Code, I guess the browser figures out that since I overwrite the font-family for everything, the hack font is not needed. So not sure where to go with this from here 😅

I guess we could mention this somewhere that in case you want to change the font you can do it this way?

[goingforbrooke]

As @pawroman mentioned, I added Exo2 as the font for my blog, but I kept Hack as the monospace font.

I don't plan to PR it, but it involved hijacking use_hack_font in config.toml to trigger a (new) if in head.html.

[AntoniosBarotsis]

@goingforbrooke You still download the hack font 😅

That's probably the issue I was having, you need this I think:

* {
  font-family: 'Fira Code' !important;
}

[goingforbrooke]

yup, @AntoniosBarotsis bc I want it for code chunks and stuff 👆🏻