Embedding Fonts (via Google)

[stormy]

A few times I've noted questions about the @import feature for embedding fonts into customized layouts. At current, Dreamwidth hasn't decided to implement that, but users can embed fonts into their Dreamwidth layouts with a little help from Google Web Fonts. Google.com is continuously uploading and hosting a variety of fonts, free for use, and it's very quick to pop one into a Dreamwidth layout using the external stylesheet link. Jump behind the cut for a quick tutorial.

How do you use fonts hosted on Google on your Dreamwidth layout?
Tutorial Type: CSS/Customization
Difficulty: Medium

1. Choose a font on http://www.google.com/webfonts.
   
2. Click the Use this Font link in the middle of the page just before the font examples.
   
3. Select all versions of the font you want to embed. There will be check boxes, if applicable.
   
4. Copy the link supplied in the first box.
   EXAMPLE: <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'> for EB Garamond.
   NOTE: You only want to copy what is between the ' and '. In this case, it is http://fonts.googleapis.com/css?family=EB+Garamond. Save this page. Just below this link is another box which provides you a CSS code to make all your H1 headers this font. We'll use this as a template.
   
5. Go to your Customize Journal Style page: http://www.dreamwidth.org/customize/options
   
6. Click Custom CSS on the bottom left.
   
7. In the box for Custom stylesheet URL, paste the link you copied above.
   Our link for this tutorial is http://fonts.googleapis.com/css?family=EB+Garamond.
   
   This allows you to use the font on your layout, but you still must write the CSS - the style code - for specifying where you want to use it. If you're familiar with your layout code, finding a title or subtitle you want to change will be easy. If not, you might want to look up some tutorials on CSS. To continue, we'll assume we've decided to display our Journal Title in the font EB Garamond.
   
   
8. Go back and snag that H1 CSS example from the page you copied your link from. It should look something like h1 {font-family: 'EB Garamond', arial, serif;}.
   
9. In the Use embedded CSS box (the larger textbox) on your Custom Stylesheet page, paste the h1 code. Then simply take out h1 and replace it with #title for the title of your page, #subtitle, for the subtitle, and so on - whatever you'd like to change. The CSS will look something like:
   #title {font-family: 'EB Garamond', arial, serif;}
   
10. Click Save Changes.
    
    And you're finished. You can embed any of Google's Web Fonts, but so far - only one at a time. Hopefully, for those who'd love to embed some shiny new fonts into Dreamwidth, this'll be an easy way to spruce up your layouts. It's pretty nifty to me, and hopefully it'll help you out as well.
    
    Sincerely,
    Stormy
    
    Update: Multiple fonts are supported! To request multiple font families, separate the names with a pipe character (|). For example, to request the fonts Tangerine, Inconsolata, and Droid Sans: http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Comments

[ninetydegrees]

Great tut! Thanks. They've got some of my favorite open fonts there. Niiiice.

[dragonfly]

All those fonts on the google web fonts page look the same to me (kind of Times New Roman-ish). Are they supposed to display differently? I am using the latest Firefox version with no-script.

[stormy]

Hrm. I'm using Firefox as well. I'm not entirely sure why they wouldn't be loading as long as the page has loaded entirely. If it's not displaying on Google's site - it might be good to submit some feedback to them from the upper right hand menu on http://www.google.com/webfonts .

[dragonfly]

Okay, thanks.

[watersword]

Yes, they're supposed to look different — here's a partial screencap of what the page looks like to me.

[ninetydegrees]

That's because of NoScript.

[stormy]

/highfives

I did not even notice that in the comment. I need to stop reading my comments on my phone.

[dragonfly]

Thanks. I suspected that.

[kerravonsen]

Would it work if one used the @import rule in one's embedded CSS instead?

[stormy]

Nope. That gets stripped out.

[theradicalgarden]

I know this post is very old but I wanted to mention that I was able to go to the "font" area of the customize journal settings and type in the names of the fonts I have imported there with success. :) So no further CSS other than importing it. :D

[mignonne422]

While that's a little quicker and will generally work when you as owner are viewing the page, the downside to that is that other users might not be seeing it in that font if they do not have that font installed on their machines.

Say you set it to read in "Arial". If I went to your page and I didn't have Arial installed on my computer I wouldn't be seeing the page the same way you do. I'd see it in whatever the journal backup default or possibly my browser default font happens to be. Depending on whether you're coding for just yourself or for a community of users, this might prove problematic.

The CSS code, however, is the workaround solution. It's a little more time, but with the code in place it doesn't matter if the other user did or did not have the font in question installed, as it's hosted remotely. Essentially, the CSS option just guarantees a little more uniformity, which may or may not be important.

[theradicalgarden]

Ahhh >_< I figured it worked OK because I have Ubuntu so I don't have any of these fonts on my machine that I know of ether, hahah.

[mignonne422]

Oh, haha, I misinterpreted the import you were talking about as importing to your machine rather than embedding the font in the CSS. MY BAD ^^;

I want to try this now. It seems like a really handy workaround for the big ticket items that can be fiddled with on the customize journal area.

[infini]

Hello! I know I am late, but I was wondering, which browsers support this method? Because I am trying to find a method that is supported by most browsers!

I am also using the @font face method, but I think it doesn't work for IE so I am trying to find other ways! :)