Google Fonts & CSS

adiadidas15 · September 9, 2013

Hello,
I am using my own HTML element as a header to my homepage. I'd like to use a special font for this element. I have followed Google Fonts "use" instructions by adding the following CSS:

font-family: 'Tangerine', cursive;

For some reason only the cursive font seems to be taking effect (not Tangerine). I am using Firefox 23. Any idea why Tangerine isn't working? I also tried adding the html which Google suggests (as below) to my html header element, but when I save my changes and then go back in to edit this element, the line of code is gone...

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

Hikin' Mike · September 9, 2013

Try using the "@import method" instead of the link. Just paste that in the top of your site-wide CSS.

@import url(http://fonts.googleapis.com/css?family=Tangerine);

adiadidas15 · September 9, 2013

Hikin' Mike,
That didn't work either, but I am not 100% sure I understood your instructions. I went to my Active Theme's settings, clicked the Advanced tab, then Edit my Custom CSS. I added your line of code to the top. Is this what you meant? Thanks for your help.

Hikin' Mike · September 9, 2013

Yep, that's what I meant, but I guess Smugmug doesn't support the @import in CSS any more.

adiadidas15 · September 9, 2013

Thanks anyway. By the way, I like your site!

Hikin' Mike · September 9, 2013

Thanks! Sorry it didn't work. Maybe SM can add that to their list.

leftquark · September 10, 2013

I had asked SmugMug Support Heroes about this ... currently there's no way to load more fonts than the 2 that are imported for your main/body sections on the site. It's a big bummer

thenickdude · September 10, 2013

The reason this isn't currently possible is that you can't load CSS from an external resource, and all the default Google Fonts work that way. However, you *can* load a font-face from an external resource. So with a little hackery to serve the right font to the right browser (especially IE9), you can add this to your CSS:

@font-face {
	font-family: 'Tangerine';
	font-style: normal;
	font-weight: 400;
	src: 
		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'),
		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'),
		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}

Now Tangerine should be available for use. Tested & working in IE9, IE10, Firefox latest, Chrome latest, Safari latest.

Hikin' Mike · September 10, 2013

Lamah wrote: »
The reason this isn't currently possible is that you can't load CSS from an external resource, and all the default Google Fonts work that way. However, you *can* load a font-face from an external resource. So with a little hackery to serve the right font to the right browser (especially IE9), you can add this to your CSS:
@font-face {
    font-family: 'Tangerine';
    font-style: normal;
    font-weight: 400;
    src: 
        url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'),
        url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'),
        url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}
Now Tangerine should be available for use. Tested & working in IE9, IE10, Firefox latest, Chrome latest, Safari latest.

Didn't even think about using @font-face. I used that on another site (non-SM) I run. Thanks!

adiadidas15 · September 10, 2013

Thanks Lamah!

Hikin' Mike · September 11, 2013

Lamah wrote: »
The reason this isn't currently possible is that you can't load CSS from an external resource, and all the default Google Fonts work that way. However, you *can* load a font-face from an external resource. So with a little hackery to serve the right font to the right browser (especially IE9), you can add this to your CSS:
@font-face {
    font-family: 'Tangerine';
    font-style: normal;
    font-weight: 400;
    src: 
        url([B]http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix[/B]) format('embedded-opentype'),
        url([B]http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff[/B]) format('woff'),
        url([B]http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf[/B]) format('truetype');
}
Now Tangerine should be available for use. Tested & working in IE9, IE10, Firefox latest, Chrome latest, Safari latest.

I have a question. Where did you get the URLs for the font?

leftquark · September 11, 2013

Lamah wrote: »
The reason this isn't currently possible is that you can't load CSS from an external resource, and all the default Google Fonts work that way. However, you *can* load a font-face from an external resource. So with a little hackery to serve the right font to the right browser (especially IE9), you can add this to your CSS:
@font-face {
	font-family: 'Tangerine';
	font-style: normal;
	font-weight: 400;
	src: 
		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'),
		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'),
		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}
Now Tangerine should be available for use. Tested & working in IE9, IE10, Firefox latest, Chrome latest, Safari latest.

Also, as an FYI: If you want to embed multiple fonts, just do additional @font-face { blah } lines. You can use these in any CSS. For example:

@font-face {
	font-family: 'Tangerine';
        ...
}
@font-face {
	font-family: 'Roboto Condensed';
        ...
}
@font-face {
	font-family: 'Open Sans';
        ...
}

h1 { font-family: 'Tangerine'; }
h2 { font-family: 'Roboto Condensed'; }
.sm-whatever-div-you-want { font-family: 'Open Sans'; }

leftquark · September 11, 2013

Hikin' Mike wrote: »

I have a question. Where did you get the URLs for the font?

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 IE 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 can see the first one gives you the .EOT file path ... and hte last one gives you the .woff file path.

To get the TTF URL is a bit more complicated. I followed the directions here to spoof my Firefox browser as if it was Safari 5.1.4. Loading the stylesheet then gave me the URL for the ttf file.
http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html

Hikin' Mike · September 11, 2013

leftquark wrote: »
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 IE 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 can see the first one gives you the .EOT file path ... and hte last one gives you the .woff file path.

To get the TTF URL is a bit more complicated. I followed the directions here to spoof my Firefox browser as if it was Safari 5.1.4. Loading the stylesheet then gave me the URL for the ttf file.
http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html

I'm not using 'Tangerine'. I'm using another font (Muli and Open Sans Condensed Bold), so I need that URL. I went and generated my own @font-face using "Font Squirrel Generator" and uploaded them to my other (non-SM) site. I'm still curious about the URL.

Hikin' Mike · September 11, 2013

I just read your link. Sounds like a pain to do that, so I'll just keep my fonts loaded on my other site.

leftquark · September 11, 2013

Hikin' Mike wrote: »

I'm not using 'Tangerine'. I'm using another font (Muli and Open Sans Condensed Bold), so I need that URL. I went and generated my own @font-face using "Font Squirrel Generator" and uploaded them to my other (non-SM) site. I'm still curious about the URL.

I just listed tangerine as an example so you could replicate it, then do it using your own fonts... It's up to you to pull the URLs you want but here's something to get you started:

Download a "User Agent Switcher" for Chrome or Firefox.
1) Type the following 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 above.

For Muli: http://fonts.googleapis.com/css?family=Muli
For Open Sans Condensed Bold: Repeat with http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700

I got those URLs by going to https://www.google.com/fonts and typing in "Muli" in search, then click on "Quick-Use", then scrolling down to the "3. Add this code to your website" section and getting the URL from either "Standard" or "@import".

It certainly is a pain

thenickdude · September 15, 2013

If you're using the Exo body font, SmugMug only loads the Thin and Regular weight variants, so you can't make Bold or Italic text. Here's the CSS code which loads those Bold or Italic variants for Exo, using the same method described by leftquark above:

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 700;
	src:
		url(http://themes.googleusercontent.com/static/fonts/exo/v1/OqFmJmsFlYjHnwejpSKkeA.eot?#iefix) format('embedded-opentype'),
		url(http://themes.googleusercontent.com/static/fonts/exo/v1/2Qm7q1bJBA_zQozsmNjYk-vvDin1pK8aKteLpeZ5c0A.woff) format('woff'),
		url(http://themes.googleusercontent.com/static/fonts/exo/v1/EzuTFo66hFh-uPBO_c4r-OvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');
}

@font-face {
	font-family: 'Exo';
	font-style: italic;
	font-weight: 400;
	src:
		url(http://themes.googleusercontent.com/static/fonts/exo/v1/j5-A0SDRUMMsVNSIuqr_tg.eot?#iefix) format('embedded-opentype'),
		url(http://themes.googleusercontent.com/static/fonts/exo/v1/BOSU_kNwP2WleVy2r3VgP6CWcynf_cDxXwCLxiixG1c.woff) format('woff'),
		url(http://themes.googleusercontent.com/static/fonts/exo/v1/tnTyh-_bPF08fC7p1nvHmKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

You'll also need to add CSS to allow em/i/strong/b tags to choose those fonts again (the default theme disables them):

i, em {
	font-style: italic;
}

b, strong {
	font-weight: bold;
}

Just posting in case somebody else finds it useful! If I have to do this too many more times, I'll make a tool which automatically generates the CSS for a given Google font

.

LiveAwake · March 26, 2014

Just posting in case somebody else finds it useful! If I have to do this too many more times, I'll make a tool which automatically generates the CSS for a given Google font .

Let us all know if you do that!! This is a real pain, esp. for we who don't really know our way around coding anyway. I can't believe the lame fonts we are locked into by SM without this very complicated process! Why SmugMug??

I'm trying to get 'Cantata One' but I feel a little lost with all the user agent switching and code compiling. :cry

Hikin' Mike · March 26, 2014

LiveAwake wrote: »

Let us all know if you do that!! This is a real pain, esp. for we who don't really know our way around coding anyway. I can't believe the lame fonts we are locked into by SM without this very complicated process! Why SmugMug??

I'm trying to get 'Cantata One' but I feel a little lost with all the user agent switching and code compiling. :cry

How about this:

@font-face {
    font-family: 'Cantata One';
    font-style: normal;
    font-weight: 400;
    src:url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZWfQcKutQXcIrRfyR5jdjY8.eot'),
        url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZWfQcKutQXcIrRfyR5jdjY8.eot?#iefix') format('embedded-opentype'), 
        url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZYbN6UDyHWBl620a-IRfuBk.woff') format('woff'),
        url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZZ0EAVxt0G0biEntp43Qt6E.ttf') format('truetype');
}

LiveAwake · March 26, 2014

Hikin' Mike wrote: »

How about this:

@font-face {
    font-family: 'Cantata One';
    font-style: normal;
    font-weight: 400;
    src:url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZWfQcKutQXcIrRfyR5jdjY8.eot'),
        url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZWfQcKutQXcIrRfyR5jdjY8.eot?#iefix') format('embedded-opentype'), 
        url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZYbN6UDyHWBl620a-IRfuBk.woff') format('woff'),
        url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZZ0EAVxt0G0biEntp43Qt6E.ttf') format('truetype');
}

You are amazing.

One last thing - can someone tell me the code to make this (or any) font the default for plain text on my site? I figured out how to do it for headers, but what about just normal text?

THANK YOU!!

Hikin' Mike · March 27, 2014

LiveAwake wrote: »

You are amazing.

One last thing - can someone tell me the code to make this (or any) font the default for plain text on my site? I figured out how to do it for headers, but what about just normal text?

THANK YOU!!

If you've changed the header font, then under that you'll see 'Body Font'. If your using 'Cantata One' on either Header or Body font then you don't need to use the @font-face CSS.

LiveAwake · March 27, 2014

Hikin' Mike wrote: »

If you've changed the header font, then under that you'll see 'Body Font'. If your using 'Cantata One' on either Header or Body font then you don't need to use the @font-face CSS.

I apologize, but you lost me. Where will I see "Body Font"? I don't see anywhere that SmugMug allows me to choose fonts in text boxes (just size using the heading/normal selector).

I managed to use the code you gave me inside an HTML/CSS block to get the headers to show up in Cantata One by adding the code below, but I don't know the tag for the body text so it still shows as the ugly default font.

h1 {
  font-family: 'Cantata One';
}

h2 {
  font-family: 'Cantata One';
}

h3 {
  font-family: 'Cantata One';
}

h4 {
  font-family: 'Cantata One';
}

Hikin' Mike · March 27, 2014

LiveAwake wrote: »
I apologize, but you lost me. Where will I see "Body Font"? I don't see anywhere that SmugMug allows me to choose fonts in text boxes (just size using the heading/normal selector).

I managed to use the code you gave me inside an HTML/CSS block to get the headers to show up in Cantata One by adding the code below, but I don't know the tag for the body text so it still shows as the ugly default font.
h1 {
  font-family: 'Cantata One';
}

h2 {
  font-family: 'Cantata One';
}

h3 {
  font-family: 'Cantata One';
}

h4 {
  font-family: 'Cantata One';
}

There is no selection on individual HTML blocks. If you want to your headers and body fonts to be site-wide, then you select that in your Theme's CSS... Customize > Customize Site > Entire Site > Theme > "wrench icon" > Fonts".

If this is just for one page, you need this for both headers and body fonts:

body, html, h1, h2, h3, h4, h5, h6 {
    font-family: 'Cantata One';
    }

LiveAwake · March 27, 2014

Hikin' Mike wrote: »
There is no selection on individual HTML blocks. If you want to your headers and body fonts to be site-wide, then you select that in your Theme's CSS... Customize > Customize Site > Entire Site > Theme > "wrench icon" > Fonts".

If this is just for one page, you need this for both headers and body fonts:
body, html, h1, h2, h3, h4, h5, h6 {
    font-family: 'Cantata One';
    }

Oh wow . . . well that's embarrassing. I didn't even realize I could customize the fonts within the theme. I thought SM just stuck us with that one terrible font and required these complicated work-arounds to use anything else.
THANK YOU!

Hikin' Mike · March 27, 2014

Glad to help.

Using the @font-face is a way to add more than 2 fonts. I use that to load a different font for the navigation stuff.

LiveAwake · March 27, 2014

Got it. Much appreciated.

ChancyRat · June 7, 2019

I'm still on a hunt to get Buda back up and actively working on my site. It worked for years and then poof out. (See this thread: https://dgrin.com/discussion/comment/2082070.)
The nickdude, lamah, and leftquark all provided code above, but when I go the google font site and start to dig in, none of the instructions work any more. (Example: Leftquark's "Go to www.google.com/fonts and find the font you want. Click "use"." As far as I can see there is no Use option.

Anyway, what I see in the examples here is that my current code seems to be lacking one of the urls. I have 3 but the examples above have 4. And maybe the other URLs have changed?

Would someone take pity on me--who-has-no-coding-skill and update this code for Buda? I'll try it in my site-wide CSS and see if that does the trick and then come back if not.

/*@font-face {
font-style: normal;
font-weight: 400;
src:
url(http://themes.googleusercontent.com/static/fonts/buda/v3/xpKVHc19vcKaqMGd7JtK-A.eot?#iefix) format('embedded-opentype'),
url(http://themes.googleusercontent.com/static/fonts/buda/v3/3N6IHhwL9GuAVU1WX0Z9CA.woff) format('woff'),
url(http://themes.googleusercontent.com/static/fonts/buda/v3/In5nPPB6p1Mco64syFRrYQ.ttf) format('truetype');
}

Many thanks!

ChancyRat · June 7, 2019

Okay by tripping over instructions I forced a "find" of some code but I still don't know what to do with it as it doesn't resemble anything close to the above URLs:
Via this link: https://fonts.googleapis.com/css?family=Buda:300&display=swap
I get this:

/* latin */
@font-face {
font-family: 'Buda';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Buda Light'), local('Buda-Light'), url(https://fonts.gstatic.com/s/buda/v9/GFDqWAN8mnyIJSSrK7ILrg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Hikin' Mike · June 7, 2019

@ChancyRat said:
Okay by tripping over instructions I forced a "find" of some code but I still don't know what to do with it as it doesn't resemble anything close to the above URLs:
Via this link: https://fonts.googleapis.com/css?family=Buda:300&display=swap
I get this:

/* latin */
@font-face {
font-family: 'Buda';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Buda Light'), local('Buda-Light'), url(https://fonts.gstatic.com/s/buda/v9/GFDqWAN8mnyIJSSrK7ILrg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

What are you trying to do?

What is your website?

You should have started a new thread.

thenickdude · June 7, 2019

It seems that SmugMug is now stripping the "src" attribute from the CSS - so it's preventing you from loading fonts from other sources using this method.

ChancyRat · June 7, 2019

ARGH. Sooo sorry. I will go back to the thread (more recent one) that I did start. It's just that the code suggestions on this thread are apropos to the problem.

Google Fonts & CSS

Comments