treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] @font-face Question

  • I found a Tumblr theme that I really like. And by "I really like" I mean that I want to design my official website around it for continuity reasons. So, basically, here is my Tumblr. You can edit the HTML directly. I have been looking through the code to see how Sleepover (the designers of the Chunky theme) are calling their fonts. The major ones in use are Chunky, Roswell, and Georgia. Everyone has Georgia on their computer, but not so much with Chunky or Roswell. I did not know if they were using something like @font-face. I have tried to implement @font-face, but I am clearly doing something wrong. If someone could show me how to implement the font Roswell on my website I would muchly appreciate it. Also, I am using WordPress to design my website if that helps. Thank you in advance!

  • You need a webfont license. You cannot use it via @font-face unless you have a license to do so.

  • Also, I tested the Tumblr link you posted above, I see Rockwell (slab), not Roswell (sans-serif).

    Let me gather more info since one of those you mentioned is open source, I believe.

  • I guess it is back to using Arvo, which is provided by Google Web Fonts. The poor man's Rockwell. Thank you kindly, good sir.

    Edit: I just saw your new message. Oh, goody. But I just looked it up. Rockwell is indeed something you have to pay for, but Chunky is freely available. I do not really care for Chunky. Rockwell was the main one I wanted to use. Sad face.

  • Chunk (download): font-face agreement

    Rockwell (buy): This font requires a purchased license.

    @mintertweed Why not pay for it? By the way, you might want to look at Kulturista or Adelle for an alternative (both on Typekit).

    Regardless of Kulturista being a display face, it renders very well at small sizes and it's what I intended to use for my body copy.

  • Oh, wait. The main font is Chunk. I thought the tag line was Rockwell for some strange reason. I see now that it is second in the hierarchy of fonts. Nevermind what I said.

    Okay, I looked at the link that talks about font-face agreement and I am completely lost. I mostly don't understand how I am supposed to implement the font onto my website. I am sure once I do this once, I will know how to do it. So, I think I need a little bit of hand-holding with this. I was looking at Chris' tutorial on @font-face. Do I use this method? And if I do, how do I actually apply it? Thank you to anyone who is willing to deal with my idiocy!

  • @mintertweed Are you busy right now? Go here and i'll walk you through it.

  • @mintertweed All right so I guess you'll have to go by this:

    Download the Chunk font kit from Font Squirrel here.

    Create a directory (folder) on your server and name it whatever you want (e.g. fonts, webfonts) and upload the font files to that folder.

    Now, just edit this CSS with the correct font-family name and paths and you should be all set.

  • With your assistance Mister @chrisburton, I was able to successfully use @font-face on the first go. This is a very rare occurrence for me. Thank you muchly!

  • @mintertweed Glad to hear that. You're welcome.