Skip to content

Topic 9: Changing site fonts

TO UPDATE THIS PAGE: Open and edit the topic_9.md file, in docs/ folder, to delete this placeholder text and customize with your own!

You are welcome to use any fonts you want on your website. Here, only using Google fonts is described (there are other methods for downloading fonts and adding, not included here).

Fonts are Imported and Specified in theme.css

In your MkDocs project, open the theme.css file located in your docs/assets/css directory (or wherever you have your custom CSS if you have moved it).

Near the top, you'll see some lines that look like this:

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Sanchez&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap');

These are the import commands to get three different Google fonts (Sanchez, Nunito Sans, and Roboto Mono). You can explore many different Google fonts here.

Use Different Fonts

  1. Find a Google Font:

  2. Browse and select a font you like.

  3. Select Font Styles:

  4. Click on the font. To the right of the font example text, you should see an option to '+ Select this style'. Click the one(s) you want to select.

  5. Access Your Selected Styles:

  6. This will probably bring up a side menu. If you don't see that side menu, you can access your selected styles by clicking on the top-right menu icon that is a grid with 3 squares and a plus sign - hovering reveals this is to 'View your selected families'.
  7. In the Use on the web section of the side menu, select the radio button for @import. It’ll look like this (for the Zen Dots Google Font):
<style>
@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
</style>
  1. Copy the Import Line:

  2. Copy everything between (but excluding) the <style> and </style> tags.

  3. Paste into theme.css:

  4. Paste the @import line you've copied into the top section of your theme.css file near the other font imports. Add a comment so you can remember what this font is and how you are using it.

  5. Update CSS with New Fonts:

  6. Replace the existing font names in your CSS with the name you've imported. Use Find & Replace All to ensure you update the font everywhere it appears in the current theme.

  7. Repeat for Additional Fonts:

  8. Repeat the above steps for as many different fonts as you want to update in your theme.