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 a great tutorial: Use Additional Google Fonts.
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.
CSS
/**
* Fonts
************************************************/
@font-face {
font-family: 'KarateMedium';
font-weight: normal;
font-style: normal;
src: url('http://www.YourWebsiteHere.com/fonts/karate-webfont.eot'),
url('http://www.YourWebsiteHere.com/fonts/karate-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.YourWebsiteHere.com/fonts/karate-webfont.woff') format('woff'),
url('http://www.YourWebsiteHere.com/fonts/karate-webfont.ttf') format('truetype'),
url('http://www.YourWebsiteHere.com/fonts/karate-webfont.svg#KarateMedium') format('svg'),
local('Karate Medium'),
local('Karate-Medium');
}
.karate-font {font-family: 'KarateMedium' !important;}
HTML
<div class="karate-font">
<p>This is a font called “Karate”.</p>
</div>
The Results:
This is a font called “Karate”.