Use Additional Google Fonts

By default SM only allows you to load the 2 Google fonts defined in your theme. If you want additional fonts it blocks them. But there's a work-around listed on this thread: http://www.dgrin.com/showpost.php?p=1909714&postcount=13 Then all you have to do is call out "font-family: WHATEVER" in your CSS and the font you chose will work! This works in early version of IE too! Go to www.google.com/fonts and find the font you want. Click "use". It gives you a link to the style sheet. For Tangerine, for example, it gives: "http://fonts.googleapis.com/css?family=Tangerine" Paste that stylesheet link into your browser URL bar and you get a CSS file that looks like:

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'),
         url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
You will need to use this link to get the links to the .EOT, the .TTTF, and the .WOF files. Download a "User Agent Switcher" for Chrome or Firefox. 1) Type the above links into your browser (first left at default Chrome or Firefox). 2) Grab the woff link it gives you in the CSS file that loads. 3) Change your User Agent to IE and reload 4) Grab the eot link it gives in the CSS file 5) Change your User Agent to Safari 5.1.4 and reload 6) Grab the ttf link it gives in the CSS. 7) Take the 3 links you grabbed and generate your CSS as defined below. Here's an example for Open Sans Condensed:
/* =====================================
   Define additional fonts to be used  =
   =====================================
   Use Open Sans Condensed */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: 
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xOnoCx_jK1JUF_-5xuexfsU.eot?#iefix) format('embedded-opentype'),
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff'),
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.ttf) format('truetype');
}

/* Customize the way my sub-titles work in the caption below the photo */
.mySubTitle {
  font-family: 'Open Sans Condensed';
}

Comments

  • javier lomont

    on September 21, 2020

    Hello Aaron, thank you so much for all your customizations. You are helping a lot to make my website more me .

    I'm having some trouble with this code.
    I followed your steps and I implemented the code into my sm website but I dont get to see the font in the menu of options availables to be used.

    I pasted the code as a css into the them of the website, I also tryed to instead put it as a css code block for the entire site, and I also tried to do it just as a css block for the page in particular, putting the code in the body of the page. None of this differents ways worked for me.

    Any idea what I could be doing wrong?

    This is the css code :

    /******************************************************/
    Define additional fonts to be used =
    =====================================
    Use Cormorant Garamond */
    @font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    src:
    url(https://fonts.gstatic.com/s/cormorantgaramond/v8/co3YmX5slCNuHLi8bLeY9MK7whWMhyjQdl9vuQ.ttf) format('truetype'),
    url(https://fonts.gstatic.com/s/cormorantgaramond/v8/co3YmX5slCNuHLi8bLeY9MK7whWMhyjQdl9fsw-IxBSL_g94.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/cormorantgaramond/v8/co3YmX5slCNuHLi8bLeY9MK7whWMhyjQdl9vuA.eot) format('embedded-opentype');
    }

    Thanks again for everything

  • Peter C. Blanchard

    on March 27, 2014

    Thanks for posting this! I'm having a little trouble with the technical aspects of it . . . User Agent Switcher?
    Trying to get code for "Cantata One" font, can you help?
    (I would have posted in your Dgrin thread, but the link you sent goes to an individual post, not the thread)

Powered by SmugMug Owner Log In