FYI: How To Add Google Fonts to Any Themes' CSS

[TaraUnscripted]

SOLUTION

For anyone who has spent hours searching the forums, YouTube, the internet, Discord, & giant haystacks for how to change fonts (like I did). Here is the step-by-step
(Disclaimer: may vary based on theme)

1. Download a CSS file editor (I used Atom )

2. Go to Obsidian settings / Appearance / Themes and click on the ‘Open themes folder’
   

   

3. Locate the CSS file you are using. (in this screenshot I have two installed but Obsidian is set to Blue Topaz) Right-click the css file and ‘open with’ Atom
   

   

4. Go to Google Fonts and search for a font or two you like. Here I chose ‘Boogaloo’ - click on the font and then click ‘select this style’.
   

5. click the @import radio button and copy ONLY the HTML link to the code. Ignore the tags
   

Also, make note of the bottom of the screen where it provides the CSS styling. You’ll need this.

6. Go back to your CSS file in Atom and scroll to the bottom of the header data and paste your Font URL just before any file code starts.
   

   

7. Search the CSS file for the Font-Families section. It’s usually near the top of the file.
   /font family/
   Now add the CSS from step 7 to each specific font title you like. Here I changed all my headings to Boogaloo
   

   

8. click CMD+S to save the file and you should see Obsidian update automagically.

Here is what all my new headers look like with a little color tweaking to boot.

NOTES:

1. You can add multiple Google fonts using the same method. Just stack your @font-links under the header and keep note of each unique CSS style. You can give each font in the file its own font if you like, although I don’t recommend it because…messy.

2. save your CSS file every so often and before you do major work. If you don’t like something or mess it up, just hit CMD+Z to undo your changes. It’s easier to fix a simple change than 50 in the file.

3. If you want to revert the theme back to the default, go back to Themes in Obsidian Appearance and just install it again. When it asks to ‘overwrite’ his YES. This will give you a clean install.

4. Font families usually applies to the entire CSS file, but colors don’t. If your theme has both light and dark modes, and you want to change the colors of your fonts, you’ll have to do it in both sections of the CSS file. Search for the tags
   .theme-dark {
   .theme-light {