Use Additional Google Fonts - Aaron Meyers

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

Powered by SmugMug Log In