Topic 9: Changing site fonts

TO UPDATE THIS PAGE: Open and edit the topic_9.Rmd file, in the project root, 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 Project in RStudio, open the theme.css file.

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

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

/* Body font */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400&display=swap');

/* Code font (Roboto Mono) */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap');

Those are the import command to get 3 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 you like.

2. 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.

3. That will probably bring up a side menu. If you don’t see that side menu, you can see your selected styles at any time 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’. In the Use on the web section of the side menu that appears, select the radio button for @import. It’ll look weird like this (for the Zen Dots Google Font):

    <style>
    @import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
    </style> 

4. Copy everything BETWEEN (but excluding) the ending <style> and </style>tags

5. Paste the @import line you’ve copied into the top section of theme.css near the other fonts imported there. It is now available for use in your theme.

6. Update the css with your new fonts, replacing the existing font names with the name you’ve imported. You might want to use a Find & Replace All if you want to make sure you’re updating a font everywhere it appears in the current theme.

7. Repeat for as many different fonts as you want to update in your theme.