Google fonts not working on my Obsidian Publish site

[Faterson]

Hi,

I followed the instructions from here many times, carefully, but Google fonts simply aren’t loading on my Obsidian Publish site. What could possibly be wrong?

Here is what’s at the top of my publish.css file:

@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');

.published-container {
  --font-text-theme: 'Merriweather';
  --page-title-font: Courier;
  --page-title-color: #FF8C00;
  --page-title-size: 200%
}

That is, I wish to use the font Merriweather as the main text font on my site. However, it refuses to load – as do all other Google Fonts I tried. (For example, swap Merriweather for Lemon – my Obsidian Publish site still loads with the default font.)

The publish.css file itself does work, because the Courier, #FF8C00 and 200% are all respected and reflected on the site.

Thank you for any help with this.

[Faterson]

In case it might help with troubleshooting the issue, I’m attaching my publish.css file in full here.

I see no reason why Google Fonts should fail to load using this publish.css file, but they simply don’t work on my Obsidian Publish site at all, and I’m stuck with the default main font for now.

Likewise, the --site-name-font property doesn’t work for me at all. Not even with the Courier font input there – site name remains in default font. This despite Courier font working fine in the --page-title-font property. So, --site-name-color and --site-name-color-hover work fine for me, but --site-name-font specification is ignored, and I’m stuck with the default font for the site name, too, just like for main text.

Thank you for any help with this.

[Pch]

I have absolutely no idea if this will help you or not (as I have zero publish.css knowledge ) but :

The only teeny tiny difference I can spot between what’s mentioned in Obsidian’s documentation and the snippet you shared is :

In the link passed to @import url() there’s a css2:

https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap

Whereas in yours, it’s css:

https://fonts.googleapis.com/css?family=Merriweather&display=swap

Going directly on fonts.google.com, then looking for Merriweather and asking for the @import embed code, I got this:

<style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap')
</style>

Notice the use of css2 in the url google.fonts gave me …

This is a complete shot in the dark but maybe that’s where your issue could be ? (css vs. css2 )

[Faterson]

Many thanks for your efforts to help!

Unfortunately, the modifications you suggested show no effect on the site. (Not sure how I ended up with css instead of css2 previously, but changing that didn’t help, either.)

Right now, I have the following in the opening lines of my publish.css file:

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

.published-container {
  --font-text-theme: 'Merriweather';
}

It makes no difference, and the site remains in default font.

I previously also tried the simpler opening line:

@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');

… but again, it made no difference on the site.

I will, of course, get in touch with official Obsidian Publish support via email, if no solution can be found here (I might also try the Obsidian subreddit), but wanted to give it a try here first.

P. S.: I have updated that ZIP archive of my publish.css file with the most recent version of the file currently used by me.

[alrick]

Hey there !

I had the same problem for many days and here is the solution.

I don’t know if it’s a temporary issue or a documentation issue but at the moment, you have to set --font-text too.

Here is my working publish.css

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

.published-container {
  --font-text-theme: 'Alegreya Sans', sans-serif;
  --font-text: 'Alegreya Sans', sans-serif;
}

I hope it helps and that we have Obsidian support feedback for this issue.

[Faterson]

It works like magic! Many, many thanks!

Yeah, Obsidian’s documentation on its help page is definitely faulty, then.

Before I mark your reply as “solution”, @alrick, would you have an idea why the --site-name-font variable doesn’t work, either? It’s listed on another Obsidian help page, but again shows no effect on my site. Or do you use Obsidian’s default font for site name?

No matter what I do, the specification for --site-name-font is totally ignored. I don’t even need a Google font in there – the simple Courier would do, because that’s the font I use for page titles as well, and it is respected for page titles, but not for site name, for some reason. Even if I input a simple serif there, it’s ignored and the site name remains in the default sans-serif font.

It’s really weird because the --site-name-color and --site-name-color-hover variables are respected, so I was able to adjust the site name’s colors, but not its font family.

I tried a similar trick to the one you/we employed for the site’s main text, inserting a (likely non-existent) variable called --site-name-font-text in my publish.css file, but that doesn’t help and the site name persists in the default sans-serif font all the time.

I’ll definitely get in touch with Obsidian’s support via email if no solution for this can be found in this forum or in Obsidian’s subreddit.

[Faterson]

As I wait for potential hints on how to customize my site name font (I’d just like to use Courier for it – no Google font needed there!), I have summarized my findings on this issue on an Obsidian Publish page of mine.

My biggest gratitude belongs to @alrick without whom I wouldn’t be able to figure this all out and test dozens of Google fonts on my site.

So, here’s my summary of the issue of Google fonts use in Obsidian Publish as of today:

Google Fonts to experiment with on AveNotes (in Obsidian Publish) - Ave Notes

(I wish I would have found a summary like this when I started using Obsidian Publish last Christmas, so I hope the summary can be useful for future new users of Obsidian Publish.)