how to properly change font in this template

[diomed]

I'd like to change font to Overpass and call it from google or other cdn.

how would I do that?

[jbrr]

I'm not sure if this is the "right" way to do it, but here's what I did.

1. Add font files to public/fonts
2. Preload them in the head. https://github.com/jbrr/jbrr.dev/blob/v3.1/src/layouts/Layout.astro#L99-L135
3. Update tailwind.config.cjs with the new font family. https://github.com/jbrr/jbrr.dev/blob/v3.1/tailwind.config.cjs#L59-L63
4. Ovrerride tailwind defaults by adding the default font family in src/styles/base.css before the :root pseudoclass. https://github.com/jbrr/jbrr.dev/blob/v3.1/src/styles/base.css#L5-L44

I think that's all I had to do, but it took me so long of trial and error that I don't quite remember now. Hopefully it'll get you started at least.

[diomed]

thanks for this , very much. sad repo owner didnt answer

[jbrr]

no problem!

don't be too hard on them. i'm sure this is just something in their free time, and you never know what's going on in someone's life. plus, this is the joy of open source! we all have the opportunity to contribute, even if it's just helping someone with a question.

anyway, i'm glad i could help!

[Because789]

4. Ovrerride tailwind defaults by adding the default font family in src/styles/base.css before the :root pseudoclass. https://github.com/jbrr/jbrr.dev/blob/v3.1/src/styles/base.css#L5-L44

I don't quite get what you did here. If you want to override the tailwind default values, you can do that in tailwind.config.cjs (https://tailwindcss.com/docs/font-size#using-custom-values), right? Or am I missing something?

Btw., for a simple way to change the font, check out https://fontsource.org.

1. Pick your font and add it (e.g. npm install @fontsource-variable/overpass)
2. Import it on top of src/layouts/Layout.astro

// Supports weights 100-900
import '@fontsource-variable/overpass';

3. Remove the IBM Plex links below <!-- Google Font --> in src/layouts/Layout.astro
4. Change font family in tailwind.config.cjs
5. Enjoy

[jbrr]

@Because789 I'm a data engineer, so all of this is pretty outside of my comfort zone, so take this with a grain of salt. I'm also not familiar with fontsource. Maybe it gets around some of these issues! I don't remember exactly why I went down this path, but it might've been issues caused by loading local fonts, as opposed to using a CDN. I wish I had written real commit messages while troubleshooting.

That said, I'm not sure your approach would work. Preflight creates base styles that can only be overwritten by extending Preflight and adding new base styles. Adding the font-face directives under @layer base makes overrides the Tailwind Preflight default configuration and updates the compiled CSS. From what I remember, the Preflight compiled CSS took precedence over any styles defined outside of Preflight.

This is all a little hazy, I'm sure I'm not explaining this well because I don't fully understand it myself. But this StackOverflow answer helped a bit.

[Because789]

@jbrr Thanks a lot for your quick reply! Since I'm just a hobby programmer, you should very much take everything I say with a grain of salt, too :)

That said, I still don't get, why you had to override any Tailwind base styles just to change the font. I get that you extended the base with the custom "sansTitle* in https://github.com/jbrr/jbrr.dev/blob/v3.1/tailwind.config.cjs. But I still think there shouldn't be the need to set the font-face in the base.css.

Here is a working example for changing the font how I described it above: https://github.com/Because789/astro-blog (offline, working on an improved version). The only things I did were:

1. pnpm install @fontsource/roboto
2. import '@fontsource/roboto'; in src/layouts/Layout.astro
3. change fontFamily in tailwind.config.cjs from mono: ["IBM Plex Mono", "monospace"], to sans: ["Roboto", "sans-serif"],
4. change body definition in src/styles/base.css from "font-mono" to "font-sans"

That was it, and like that all the original AstroPaper stylings (bold, italic, etc.) were preserved. The only problem is, with this method, the OGimage generator still uses the IBM font. I'm currently working on a solution for that.

Anyway, I get that you did all that a while ago and on top of that you used a different method with downloaded fonts. At the end, all that matters is, that it worked for you!

[jbrr]

I could've sworn I tried something like that, but who knows. If nothing else, it's good to have multiple solutions here that people can try if they run into a similar issue. It's be nice to get someone to chime in who's a real expert on this stuff.

[sdotlock]

@Because789's method worked perfectly for me. This person has some instructions too, albeit in Japanese.

[satnaing]

I'll convert this issue to a discussion. Thank you to everyone who has been helping to solve this issue. Especially, @jbrr and @Because789.