Add More Google Fonts to Your SmugMug Site

SmugMug only allows two fonts in your theme by default. I'm going to show you how to add more.

Go to Google Fonts.

Select the font you want to use in your theme. In this example, I'm using 'Montserrat'. Click on that font.

You'll have a selection of font weights. In this example, I'm going to use 'Thin 100', so click 'Select this style'.

You may need to click the 'View your selected families' on the top right as shown.

Highlight and copy the font URL as shown in the right.

Find the 'Latin' version then copy/paste in your Theme's Custom CSS Section. It must be in that section because any other locations and it won't work. If you don't know how, read this: Adding CSS to your SmugMug Website

In this example, I'm going to add that font to the Gallery Title:

CSS

/**
* CSS
***************************************************/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v23/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Xw5aXo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.sm-user-ui .sm-gallery-cover-title {
  font-family: Montserrat;
  font-weight: 100;
}