stormy: βͺ ππŽπ“πˆπ‚π„ ❫ 𝑫𝑢 𝑡𝑢𝑻 𝑻𝑨𝑲𝑬 𝑴𝒀 𝑰π‘ͺ𝑢𝑡𝑺 ⊘ (Default)
sᴛᴏʀᴍʏ ([personal profile] stormy) wrote in [site community profile] dw_nifty2011-03-25 01:29 pm
Entry tags:

Embedding Fonts (via Google)

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: 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:

  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
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2011-03-25 06:19 pm (UTC)(link)
Great tut! Thanks. They've got some of my favorite open fonts there. Niiiice.