Adding non-Google Fonts to Your SmugMug Site

If you’re looking for a way to add more Google Fonts to your SmugMug site, here is my tutorial: Add More Google Fonts to your SmugMug Site.

You can add non-Google fonts to your SmugMug site too. I used Font Squirrel to create my own @font-face kit. SmugMug doesn’t have an option to upload fonts, so you need upload your new fonts online. I have a non-SmugMug site too, so I upload them to my other website.

Once you’ve upload your font(s) you need to add this to your Theme’s Custom CSS Section. I tried to add a CSS Block to “Just This Page”, but it didn’t work. For this example I created a class called .karate-font and put my text in there.


* Fonts
@font-face {
  font-family: 'KarateMedium';
  font-weight: normal;
  font-style: normal;
  src:  url(''),
        url('') format('embedded-opentype'),
        url('') format('woff'),
        url('') format('truetype'),
        url('') format('svg'),
  local('Karate Medium'),

.karate-font {font-family: 'KarateMedium' !important;}


<div class="karate-font">
  <p>This is a font called “Karate”.</p>

The Results:

This is a font called “Karate”.

Powered by SmugMug Owner Log In