Typekit support?

scouten

Since the rest of my site (not hosted on SmugMug) uses Proxima Nova*, I'd like to do the same on my SmugMug site (which is otherwise shaping up very nicely). I can't seem to find a way to enable that. When I insert custom HTML, the script tags get stripped.

I'd rather use the "real" Proxima Nova rather than the rather clumsy clones of it that are available in the Google Fonts library.

Thanks.

* Yes, I know. Me and everybody else on the planet. What can I say? I like the font.

sjnoel

Eric, did you ever find a solution to this? I called the fontkit in the site CSS and it works in Chrome but not IE or FF. Smugmug is telling me "It's not a SmugMug rendering issue. " - even though the font kits work fine from my site.

Thanks,
Jane

Hikin' Mike

sjnoel wrote: »

Eric, did you ever find a solution to this? I called the fontkit in the site CSS and it works in Chrome but not IE or FF. Smugmug is telling me "It's not a SmugMug rendering issue. " - even though the font kits work fine from my site.

Thanks,
Jane

I use the '@font-face' on my site and it works fine. You might want to read this on how to do it: http://www.dgrin.com/showpost.php?p=1909740&postcount=16

sjnoel

Thanks Mike. I read through the entire thread. I also looked at the CSS on your site...it seems like you're calling your font just like I'm calling mine. Your fonts appear correctly both in IE and Chrome, mine only appears in Chrome. I don't think my font kits can be corrupted, because it works fine on my site. Any ideas?


@font-face {
font-family: 'franklin_gothic_demi_condRg';
src: url('http://www.cmewebsites.com/template_dwt/fonts/14359-webfont.eot');
src: url('http://www.cmewebsites.com/template_dwt/fonts/14359-webfont.eot?#iefix') format('embedded-opentype');
url('http://www.cmewebsites.com/template_dwt/fonts/14359-webfont.woff') format('woff'),
url('http://www.cmewebsites.com/template_dwt/fonts/14359-webfont.ttf') format('truetype'),
url('http://www.cmewebsites.com/template_dwt/fonts/14359-webfont.svg#franklin_gothic_demi_condRg') format('svg'),
font-weight: normal;
font-style: normal;
}


@font-face {
font-family: 'muliregular';
src: url('http://www.thebackcountry.org/fonts/muli-regular-webfont.eot');
src: url('http://www.thebackcountry.org/fonts/muli-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thebackcountry.org/fonts/muli-regular-webfont.woff') format('woff'),
url('http://www.thebackcountry.org/fonts/muli-regular-webfont.ttf') format('truetype'),
url('http://www.thebackcountry.org/fonts/muli-regular-webfont.svg#muliregular') format('svg');
font-weight: normal;
font-style: normal;
}

Hikin' Mike

I haven't checked your CSS for the 'font-family', but is it spelled correctly? Also are you using that font on the whole site, body, headers etc?

Hikin' Mike

I don't know if this is the problem, but I noticed your 'font-family' is calling 'franklin_gothic_demi_condRg', and not 'Franklin Gothic Demi Cond' :

.megamenu > li > a {
    display: block;
    font-family: 'franklin_gothic_demi_condRg','Oswald',sans serif;
    font-size: 18px;
    outline: 0 none;
    padding: 9px 21px 11px;
    text-decoration: none;
}

sjnoel

It's spelled the same as what's working on my site. We're really trying to get it to work in the menu so that the menu on my site and smugmug match.

The code for the menu is a lot more complex than it should be. We were copying a responsive menu in from our site, but gave up trying to get the complex responsive dropdown to work. I'm going to spend some time tomorrow simplifying it to see if that will help.

I'm also going to remake the font kit on the off chance there's an odd corruption. I don't think so - again because it works on my site with the exact same font kit!

I was reading about cross-domain fontkit issues on IE and FF. I don't know if that could be related or not. Yours would do the same cross-domain stuff mine is doing and it works for you.

If you got it to work on your site, there's no reason I can't get it to work here.

I really appreciate your help.

Thanks,
Jane

Hikin' Mike

After looking at it again, that can't be the problem, because it does work on your other site. You did the same thing that I did. I copied my "regular site" (Wordpress) menu to SM.

My site works, but maybe because I have the fonts loaded on my computer. Going to have to check for sure.

Hikin' Mike

Okay, I just removed the font (Muli Regular) on my computer. I also removed the 'sans-serif' from the font-family stack, just leaving 'Muli'. It defaults to 'serif'. So created a Google @font-face and uploaded it to my theme's CSS, and it works. So seems like Smugmug sees Google @font-face, but not "custom" @font-face like 'Font Squirrel'.

@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src:    url(http://themes.googleusercontent.com/static/fonts/muli/v5/kU4XYdV4jtS72BIidPtqyw.woff) format('woff'),
        url(http://themes.googleusercontent.com/static/fonts/muli/v5/BfQP1MR3mJNaumtWa4Tizg.ttf) format('truetype'),
        url(http://themes.googleusercontent.com/static/fonts/muli/v5/BkuZCUxEYxRfSu-XBj9_CA.eot),
        url(http://themes.googleusercontent.com/static/fonts/muli/v5/BkuZCUxEYxRfSu-XBj9_CA.eot?#iefix) format('embedded-opentype'); 
    }

sjnoel

Your experimentation saved us some time. It appears that you are correct...google fonts only.

I spent more time researching it and I bet it's got more to do with FF and IE not accepting cross-domain @font-face files - sounds like this is an issue for a lot of people (like those using Amazon, Tumbler, CDNs). We settled for a similar google font.

Thank you for all you help!