smugler.co - Using third party fonts on your SmugMug site

tomnovy

Hi friends,

New SmugMug customization tutorial on how to add non Google Fonts to your SmugMug site:

http://www.photom.me/Blog/Importing-Fonts-to-SmugMug

Enjoy!

Hikin' Mike

I decided to give it a try again. I created a testing page, and unfortunately it doesn't work. The fonts work fine on my kid's WordPress site, but not on Smugmug. I added the fonts to my custom Theme and added two new classes to select each font.

http://gallery.imagesinthebackcountry.com/Smugmug-customization/Testing-Fonts

Part of my Theme's CSS

@font-face {
    font-family: 'KarateMedium';
    src: url('http://www.thebackcountry.org/fonts/karate-webfont.eot');
    src: url('http://www.thebackcountry.org/fonts/karate-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.thebackcountry.org/fonts/karate-webfont.woff') format('woff'),
         url('http://www.thebackcountry.org/fonts/karate-webfont.ttf') format('truetype'),
         url('http://www.thebackcountry.org/fonts/karate-webfont.svg#KarateMedium') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    
@font-face {
    font-family: 'ZebraRegular';
    src: url('http://www.thebackcountry.org/fonts/zebra_01-49-58-webfont.eot');
    src: url('http://www.thebackcountry.org/fonts/zebra_01-49-58-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.thebackcountry.org/fonts/zebra_01-49-58-webfont.woff') format('woff'),
         url('http://www.thebackcountry.org/fonts/zebra_01-49-58-webfont.ttf') format('truetype'),
         url('http://www.thebackcountry.org/fonts/zebra_01-49-58-webfont.svg#ZebraRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    
.karate-font {
    font-family: 'KarateMedium' !important;
    }

.zebra-font {
    font-family: 'ZebraRegular' !important;
    }    

My custom page
[html]
<div class="karate-font">Karate Medium Font</div>
<div class="zebra-font">Zebra Regular Font</div>
[/html]

tomnovy

Hi Mike,

Could you please send me the font files ? Post a dropbox or a google drive link here.

I will check this for you

tomnovy

Mike,

It worked for me fine - see my screenshot:

http://take.ms/H8Gxp

Try using this css code to import your font:

@font-face {
    font-family: 'karatemedium';
    src: url('https://dl.dropboxusercontent.com/u/10270090/fonts/Karate-webfont.eot');
    src: url('https://dl.dropboxusercontent.com/u/10270090/fonts/Karate-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropboxusercontent.com/u/10270090/fonts/Karate-webfont.woff2') format('woff2'),
         url('https://dl.dropboxusercontent.com/u/10270090/fonts/Karate-webfont.woff') format('woff'),
         url('https://dl.dropboxusercontent.com/u/10270090/fonts/Karate-webfont.ttf') format('truetype'),
         url('https://dl.dropboxusercontent.com/u/10270090/fonts/Karate-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

It could be that your FTP server does not support HTTPS connection.

Hikin' Mike

I tried that and that didn't work.

tomnovy

Hikin' Mike wrote: »

I tried that and that didn't work.

Mike,

You have copied my code without the @ sign at the beginning. I have also added a css code to your HTML content block - now everything works fine.

Hikin' Mike

tomnovy wrote: »

Mike,

You have copied my code without the @ sign at the beginning. I have also added a css code to your HTML content block - now everything works fine.

Thanks.

I had the same code you added to HTML block on my custom Theme CSS already.

tomnovy

Mike,

That code would not work if you add it in the theme settings, instead of using it in the HTML block. Also - there was an @ sign missing at the beginning of the font import code.

Hikin' Mike

I saw that I missed the @ the first time. It's odd because I removed the code in the HTML block and it's working. The other font isn't loading, but since this was just a test, I'm not going to worry about it until I need to use non-Google fonts for real.

Thanks!