December 26, 2010

Improved custom fonts on your site

A while back I wrote a tutorial on how to use Cufon to display custom fonts on your site, and since then, that was how I displayed the custom fonts you saw in my post titles and whatnot. However, there are a couple downsides to using Cufon:

  • You can’t select the text rendered by Cufon, a problem for people trying to copy something
  • Limited customization through CSS
  • Could result in pages taking longer to load

So for this new theme (yay! finally!), I switched to using CSS3′s @font-face property. I know a lot of people have already been using this for a while now, but I also noticed that some people’s stylesheets’ @font-face property will only work in certain browsers. Almost all major browsers’ latest versions support @font-face; it’s just a matter of having the right CSS.

For this theme, I used the @font-face kits provided by Font Squirrel. What’s great about them is that they provide the full CSS and the correct font types to ensure compatibility across all browsers, so all you need to do is copy, paste, and upload. They also have a @font-face generator, where you upload a font and they generate the necessary files for you. If any of you are looking for an alternative to Cufon, I highly recommend this method :)

Last but not least, I hope everyone has had a great Christmas! Now let’s get ready for an awesome new year! Holla 2011 :D

30 Comments
filed in Geekiness, Tips & Tricks
  • http://rachelisms.net Rachel

    Haha dude, welcome to 2010! Though I guess you had a good reason for not switching to @font-face right away. I held off for a while for the same reason, although I just didn't use custom fonts at all.

    I love Font Squirrel! Georgina (of Heartdrops.org) introduced me to it; it's really a godsend.

    How was your Christmas? Get anything awesome? :)

    • http://riyuu.org Jenny

      Haha, I know! I can't believe I didn't start using @font-face until now! My Christmas was alright, didn't do much, hahaha. But I did get some pretty nice gifts :)

  • http://coloursplash.org Isi

    Thanks Jenny. :D

    @font-face is amazing, my whole would look a mess if it wasn't for it.

    • http://riyuu.org Jenny

      Yes, I think a lot of people's sites would not be the same without it!

  • http://wildx.org/ Rilla

    I was never introduced to Cufon, I think I tend to avoid Javascript due to accessibility. So I started with Font Squirrel right from the start. Totally love it!

    • http://riyuu.org Jenny

      I was the opposite, lol . I avoided @font-face because I wanted to ensure cross-browser compatibility, but apparently Cufon had those issue too -__-

  • http://www.noirfem.me Renee

    I started using @font-face with my latest blog design because I felt cramped by cufon! I’d be wanting to see the dynamic source of things like Intense Debate and LinkedWithin and have to go through so much cufon code that I never found what I was looking for. With @font-face, things are just better, no javascript, and less mess to wade through :3 I love the new design by the way – it’s clean and has everything presented so neatly!

    • http://riyuu.org Jenny

      Thank you :) I never knew Cufon couldn't integrate with things like Intense Debate of Linked Within, but another point for @font-face! The no javascript is definitely great, too. My site loads much faster now!

  • http://blog.spicaa.net Tina

    I’ve been meaning to switch for quite a while. I’ve used Cufon for the past year and for the cons you’ve already mentioned, it has annoyed me GREATLY. I decided, oh what the heck and just changed it. *blush*

    • http://riyuu.org Jenny

      Yes, isn't @font-face so much easier to use than Cufon? :D

      • http://blog.spicaa.net Tina Solstrand

        Yeah it's just the sharpness of the font that iffs me :/

        • http://riyuu.org Jenny

          o_O You're the second person to tell me that! What browser/OS do you use?

  • http://www.harveyenrile.com harvz

    i've used cufon on one of my sites, it still looks a lot better than using @font-face, the text is much more smoother in cufon.

    • http://riyuu.org Jenny

      That's interesting, it looks the same to me. I guess it depends on the OS and browser we're using.

  • http://siliconsara.com Sara

    As with all embedding font practices, it's best to make sure that one has permission to embed in the first place. I noticed on some TOSes that embedding is not allowed, especially if one purchased a license.

    I personally like @font-face but my current theme is stuck with cufon. I have no scruples with either. :)

    • http://riyuu.org Jenny

      That's very true. That's another great thing about FontSquirrel though, the fonts they currently offer all have permission to be embedded :)

  • http://www.silent-white.com/ Cat

    Love this new layout! The colors are cute, and I like the textured background.

    I didn't know about Font Squirrel, but that looks awesome. I'll have to try it out some time on my sites =)

    • http://riyuu.org Jenny

      Thanks! I can't believe I've never really had a pink layout yet, so it's about time :P

  • http://dreamling.ca Aisling

    This design is wonderful! It seems very "you." Maybe it's because I associate the little box bunnies with you, from your avatar.

    I love @font-face and all the CSS3 goodness. Usually I design it so it's nice using CSS levels 1 and 2, and then I add CSS3 to refine things, just to be safe.

    • http://riyuu.org Jenny

      Thank you! Haha, bunnies are my favorite animals, and I'm thinking about making a comeback with them in my avatars :P

  • http://oridusartic.com/ Oridusartic

    Right when I want to change my blog's post titles with custom font. Definitely going to check the @font-face as an alternative.

    Btw, cuteness meets vintage? Woohooo, I totally love your new layout. :D

    • http://riyuu.org Jenny

      Thanks! Not sure what look I was trying to go for, but cuteness + vintage sounds good :P

  • http://sheenahfreitas.com Sheenah

    Oooo this is great for what I want! I was trying to figure out a replacement for Cufon, but I was afraid of using @font-face for cross-browser compatibility.

    Super cute new layout!

    • http://riyuu.org Jenny

      Thanks! Yes, I used to be worried about that too, but FontSquirrel provides all the code and files necessary for each browser :)

  • http://oh.so-very.me Jenny

    omgar another hotty layout. :) i feel so suck compared to you ;)

    • http://riyuu.org Jenny

      What are you talking about, your layouts are always so chic and clean! lol

  • http://www.the-artful.net/blog Shiri

    Absolutely amazing layout! And yay for finally getting the font to work right. I'm so out of touch lately that I didn't even know about this opportunity of using custom fonts on your site. I've just always tried to design "general" layouts which would work on every computer, browser etc. Not that THAT even has worked all the time ;)

    I wish you a happy new year 2011!

    • http://riyuu.org Jenny

      Thank you! :D I used to shy away from custom fonts as well, in fear that they would not show up on other computers, but you're right, you never know who could still be using Windows 98 and IE 6 (nothing works on there) -__-

  • http://thejadednetwork.com Jay

    Hadn't really looked into CSS3 yet, but this is a nice tip to keep in mind :) thanks!

    • http://riyuu.org Jenny

      You're welcome :) And thanks so much for tweeting this on Twitter!