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.

Google Font

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

Google Font - Select this style

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

Google Font - View your selected families

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

Google Font - Highlight and copy

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

Google Font - Copy/paste in your Theme's Custom CSS Section

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;
}

Powered by SmugMug Owner Log In