How to use Typekit fonts?

John Nolan

I've read a couple of discussions about adding custom fonts to my site, but I'm not getting anything to stick.
I've added Adobes' "@import" type links everywhere I can think of, and changed the css in the advanced tab of the theme css, but I still don't see the fonts on my Galleries. Looking at the pages with the developer tools in Chrome, it seems that the fonts are being overwritten by the fonts selected in Basic Panel of the "Edit Theme" box, but I don't know how to override those choices....I can't select my custom fonts from there.

I seem to be missing something obvious!

My homepage is at www.photos.ragandbone.ca (can't post links yet!)

denisegoldberg

@Hikin' Mike has a write-up on how to add non-Google fonts to your site.

Here's a link to his article - https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts.

John Nolan

Thanks...yes, I've seen, and read that article a number of times, but I can't seem to follow it through and get it to work on my site.

Hikin' Mike

If you let me know what font(s) you want to use, I can see if they work on my testing page.

John Nolan

I'm trying to use Escrow Banner and Turnip RE from Adobe fonts (the former TypeKit). Instead, I get the the fonts selected in the Basic area of the theme panel.

Hikin' Mike

Where are you loading those fonts? Can you post the link to the fonts?

John Nolan

Thanks for your help.

I'm using the TypeKit embed code.

Here's what I've put in the theme CSS (typekit account code is "X"ed out). I've eliminated Escrow for now, to keep it simple.

@import url("https://use.typekit.net/XXXXX.css");
.sm-tile-title {
color: #595774;
font-family: turnip-re, serif;
font-weight: 400;
font-style: normal;}
}
.sm-user-ui h2,.sm-gallery-cover-title, .sm-gallery-cover-title , .sm-gallery-cover-title h1,.sm-user-ui h1, .sm-user-ui h3, .sm-user-ui h4, .sm-user-ui h5, .sm-user-ui .sm-title-xl, .sm-user-ui .sm-h1, .sm-user-ui .sm-h2, .sm-user-ui .sm-h3, .sm-user-ui .sm-h4, .sm-user-ui .sm-h5, .sm-user-ui .sm-heading {
color: #595774;
font-family: turnip-re, serif;
font-weight: 400;
font-style: normal;}
}
.sm-page-widget-profile-v2-name {
color: #fcf2cc;
}
body, html, h1, h2, h3, h4, h5, h6 {
font-family: turnip-re, serif;
}

Hikin' Mike

SmugMug doesn't support @import. You need to use @font-face as I mentioned in my tutorial.

John Nolan

That's the gotcha: TypeKit doesn't support @font-face. :-{

Thanks.