> [!bug] <small>This is a sub-page of [[Obsidian|Obsidian Bugs & Wishes]]</small>.
## <span style="color:#00b050">Currently Employed on This Site</span>
##### Main text: [Roboto Serif](https://fonts.google.com/specimen/Roboto+Serif)
![[roboto_serif.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:
[email protected]&display=swap');`
I only found this particular Roboto font variety at the last minute, through pure luck, after I had already resigned myself to there not being a single suitable *serif* font for this site.
In order to use Google fonts on your Obsidian Publish site, you need to insert the following two lines at the top of the `.published-container` specification in your `publish.css` file:
```
--font-text-theme: '', sans-serif;
--font-text: '', sans-serif;
```
The name of your preferred Google font needs to be inserted **<span style="font-weight:bold; color:#c00000">twice</span>** (in *both* lines!) in the empty space between the single quotation marks.
Plus, you need to place the
`@import url('https://fonts.googleapis.com/css2?family=Your+Google+Font&display=swap');`
line at the very top of your `publish.css` file.
There are instructions about this on an Obsidian [help page](https://docs.obsidian.md/Reference/CSS+variables/Publish/Site+fonts), but **they are incomplete** as of January 2024, as I discovered thanks to a helpful user replying to [my Obsidian forum thread](https://forum.obsidian.md/t/google-fonts-not-working-on-my-obsidian-publish-site/74827).
It’s not enough to insert simply `--font-text-theme: 'Your Google Font', sans-serif;` in the `.published-container` as Obsidian’s help page says, but the (*seemingly* redundant) `--font-text: 'Your Google Font', sans-serif;` specification must be inserted as well.
> [!NOTE]
> I really love **Merriweather** normally, and have used it on my other sites for years (for example, in my [**Extempore** blog](http://extempore.top) or on my [**ABoQ** quotations site](https://aboq.org/Recent_Additions)), and I generally dislike *non-serif* fonts, but for a site with a default *dark* background, like AveNotes here, *serif* fonts in general, including Merriweather, just aren’t that great.
##### Headings: [Merriweather Sans](https://fonts.google.com/specimen/Merriweather+Sans)
![[merriweather-sans.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap');`
> [!NOTE]
> At least *some* consolation for Merriweather, eh?
##### Page titles: [Courier Prime](https://fonts.google.com/specimen/Courier+Prime)
![[courier-prime.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');`
A Google Font variation of the plain old monospace *Courier* font (later a. k. a. *Courier New*).
So, here’s my current (as of 24th January 2024) specification at the top of my `publish.css` file:
```
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:
[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
.published-container {
--font-text-theme: 'Roboto Serif', sans-serif;
--font-text: 'Roboto Serif', sans-serif;
--page-title-font: 'Courier Prime', monospace;
--site-name-font: 'Courier Prime', monospace;
--site-name-color: crimson;
--site-name-color-hover: yellow;
--nav-item-color-hover: crimson;
--nav-parent-item-color: #00B050;
--page-title-color: #FF8C00;
--page-title-size: 200%;
--h1-font: 'Merriweather Sans', sans-serif;
--h2-font: 'Merriweather Sans', sans-serif;
--h3-font: 'Merriweather Sans', sans-serif;
--h4-font: 'Merriweather Sans', sans-serif;
--h5-font: 'Merriweather Sans', sans-serif;
--h6-font: 'Merriweather Sans', sans-serif;
--component-title-font: sans-serif;
--component-title-color: #FF8C00;
}
```
## <span style="color:#c00000">Obsidian Publish Default Font</span>
I really wanted to avoid using it, although it looks surprisingly nice for a *non-serif* font; and I decidedly prefer *serif* fonts over non-serif fonts (except in headings).
As it is, though, if I hadn’t found Roboto Serif, then Obsidian Publish’s default non-serif font would likely be the best option.
It appears to be [the “plain” variety of **Roboto**](https://fonts.google.com/specimen/Roboto):
![[roboto.jpg]]
The default font specification for **[[Obsidian]] Publish** currently appears to be:
```
font-family (stack):"??", ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, "Segoe UI", Inter, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif
```
(I copied this from the [Chrome extension *Font Identifier*](https://chromewebstore.google.com/detail/font-identifier/ifompgilpgnbnopfpfdjcmmpgkgckabi), although I normally never use Chrome. [Vivaldi](http://vivaldi.com) is my default browser on all platforms.)
> [!example]
> Here is a comparison of how the introduction of [[Slovník zbytočných cudzích slov|a page on this site]] looks in Obsidian Publish’s default sans-serif font, and below that, in Roboto Serif. This is the sans-serif default:
![[default_Obsidian_Publish_font.jpg]]
> [!example]
> And here is the same passage again, this time in Roboto Serif:
![[my_Obsidian_Publish_font-Roboto_Serift.jpg]]
## <span style="color:#c800ff">Other Google Fonts I Tried</span>
I will list them in the rough order I liked them.
##### **[Poppins](https://fonts.google.com/specimen/Poppins)**
![[poppins.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');`
> [!NOTE]
> The second-best option following the default font, I believe, but somehow *too* distinct.
##### **[DM Sans](https://fonts.google.com/specimen/DM+Sans)**
![[dm_sans.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=DM+Sans:
[email protected]&display=swap');`
> [!NOTE]
> The third-best Google font option, in my estimation, following Roboto Serif and Poppins, for the purposes of this particular site with a default dark background.
##### **[Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans)**
![[noto_sans.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');`
> [!NOTE]
> Useful for the Russian alphabet, apparently. (If a specific Google font that doesn’t support Russian letters is used instead of Obsidian Publish’s default font specification that appears to cover *all* languages and alphabets.)
##### **[Work Sans](https://fonts.google.com/specimen/Work+Sans)**
![[work_sans.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');`
##### **[Merriweather](https://fonts.google.com/specimen/Merriweather)**
![[merriweather.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');`
> [!NOTE]
> My no. 1 favorite font, normally – just not, I’m afraid, on a site whose default background color is *dark*… 😢
##### **[Fira Sans](https://fonts.google.com/specimen/Fira+Sans)**
![[fira_sans.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');`
> [!NOTE]
> “Too narrow”, somehow…
##### **[Concert One](https://fonts.google.com/specimen/Concert+One)**
![[concert_one.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');`
> [!NOTE]
> Weird but potentially useful for headings.
> [!hint]
> The following are all very nice *serif* Google fonts (and I generally greatly prefer serif fonts over non-serif fonts) – but, just like Merriweather, apparently not really suitable for a website with a *dark* default background color…
Especially *Caladea*, *Rokkitt*, and the highly praised *Alegreya* all just struck me as too indistinct on a default *dark* background. (That also applies to *Alegreya Sans*.)
##### **[Alegreya](https://fonts.google.com/specimen/Alegreya)**
![[alegreya.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');`
##### **[Alegreya (heavier)](https://fonts.google.com/specimen/Alegreya)**
![[alegreya-500.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@500&display=swap');`
##### **[Alegreya Sans](https://fonts.google.com/specimen/Alegreya+Sans)**
![[alegreya-sans.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans&display=swap');`
##### **[Bitter](https://fonts.google.com/specimen/Bitter)**
![[bitter.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Bitter&display=swap');`
##### **[Gelasio](https://fonts.google.com/specimen/Gelasio)**
![[gelasio.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Gelasio&display=swap');`
##### **[Caladea](https://fonts.google.com/specimen/Caladea)**
![[caladea.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Caladea&display=swap');`
##### **[Rokkitt](https://fonts.google.com/specimen/Rokkitt)**
![[rokkitt.jpg]]
`@import url('https://fonts.googleapis.com/css2?family=Rokkitt&display=swap');`
#### <span style="color:#ff8c00">Resources</span>
* a nice **[overview of recommended Google Fonts](https://www.typewolf.com/google-fonts)** on [Typewolf.com](https://typewolf.com)
* [The best 30 Google Fonts for your website](https://www.justinmind.com/blog/best-google-web-fonts-website)
* [15 Best Google Fonts by the Numbers (Plus Tips on Using Them)](https://kinsta.com/blog/best-google-fonts)
* [Top 10 Google Fonts for your website’s content in 2024](https://webflow.com/blog/google-fonts)
#### <span style="color:#00b0f0">About the default font in Obsidian desktop app</span>
* according to an [Obsidian forum thread](https://forum.obsidian.md/t/q-default-font-in-default-theme/19301) from June 2021, this was supposedly the default font in the Obsidian desktop app back then:
```
:root {
--default-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
--mermaid-font: var(--default-font);
--reveal-font: var(--default-font);
--font-monospace: 'Source Code Pro', monospace;
}
```
- another potentially instructive [Obsidian forum thread](https://forum.obsidian.md/t/how-to-change-font/10927/29?page=2)
- see also my page on [[Custom fonts in Obsidian|custom fonts in Obsidian (local) app]]
#### <span style="color:#00b050">Update (25 January 2024)</span>
Well, *Roboto Serif* didn’t last long for me. I *love* it, it’s a great font, every bit as high-quality as *Merriweather* (perhaps even more so), but the trouble is: I’m not creating these webpages primarily for myself; I need to have my *site visitors* in mind before I consider my own preferences.
And it’s true that most people seem confused when they encounter webpages fashioned in a *serif* font. Yes, many reputable online publications use absolutely delightful *serif* fonts, such as *[The New Yorker](https://www.newyorker.com)* or *[The New York Times](https://www.nytimes.com)* – but they don’t employ a *dark* background as their default, and that is a problem. For this reason, and with a sigh, I eventually reverted this site’s main font to the default, which appears to be the “plain” Roboto.
Therefore, the top of my `publish.css` file, as of today, looks like this:
```
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
.published-container {
--page-title-font: 'Courier Prime', monospace;
--site-name-font: 'Courier Prime', monospace;
--site-name-color: crimson;
--site-name-color-hover: yellow;
--nav-item-color-hover: crimson;
--nav-parent-item-color: #00B050;
--page-title-color: #FF8C00;
--page-title-size: 200%;
--h1-font: 'Merriweather Sans', sans-serif;
--h2-font: 'Merriweather Sans', sans-serif;
--h3-font: 'Merriweather Sans', sans-serif;
--h4-font: 'Merriweather Sans', sans-serif;
--h5-font: 'Merriweather Sans', sans-serif;
--h6-font: 'Merriweather Sans', sans-serif;
--component-title-font: sans-serif;
--component-title-color: #FF8C00;
}
```
As I write [[Custom fonts in Obsidian|elsewhere]], in my *local, desktop* Obsidian app on my notebook and desktop computers, I use the exquisite <b><span style="color:#00b050">Bookman Old Style</span></b> font, and wouldn’t swap it for a non-serif font, no matter what. I’m typing these very words in it: white letters on a completely black background, and it looks fantastic, very distinct. But that’s just me! And so, to “go the safe way”, I reverted to the default non-serif Roboto font in the *public* version/portion of my Obsidian scratchpad…
(You see, *Bookman Old Style* isn’t really a [“web safe” font](https://webmasters.stackexchange.com/questions/15987/is-bookman-old-style-web-safe), as it comes with the installation of Microsoft Office, and not all website visitors need to have MS Office installed, especially not on their mobile devices. And, it doesn’t appear to be so easy – despite what the title of [this webpage](https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website) says – to convert a desktop-based font, such as *Bookman Old Style*, into a web font, to be served to website visitors just like a Google font. In fact, I’m not sure it would be legal, in the case of *Bookman Old Style*…)
> [!help]
> If you have any question, comment, or helpful suggestion for me regarding the use of Google fonts on this site, please drop me a line at [
[email protected]](mailto:
[email protected]). Thank you!