PicnicTutorials

# February 24, 2013 at 4:15 pm

My recent thread has made me think. I would like to use a custom font in my new site. I have always just used the plain safe type faces like Ariel and likes. I see google fonts. But have seen some bad mouth it. So what is the best way to insert custom font without affecting my page speed that much. Because currently my page speed rocks. Thanks for your pointers.

dfogge

# February 24, 2013 at 4:19 pm

most of the badmouthing aimed at google fonts stems from the shoddy quality you find there. typekit, which isn’t free, has much more high-end fonts.

here’s a tutorial on loading google web fonts quickly: http://googlewebfonts.blogspot.com/2010/09/optimizing-use-of-google-font-api.html

PicnicTutorials

# February 24, 2013 at 4:23 pm

Additionally, I don’t need them to work in ie. only degrade well.

PicnicTutorials

# February 24, 2013 at 4:24 pm

What about font squirl http://www.fontsquirrel.com/tools/webfont-generator

dfogge

# February 24, 2013 at 4:31 pm

font squirrel is cool, i used to use it, but make sure you’re legally allowed to use the fonts you submit to it.

i’m not exactly sure if loading fonts from your own server is faster than loading from a font hosting service, though.

PicnicTutorials

# February 24, 2013 at 4:46 pm

Gaaaauuuud. Tuts out there freaking blow. Just tell me how to do it. DON’T MAKE ME WADE THROUGH ALL YOUR LIFE STORRIES TO FIND THE CODE.

Every time there is more than one or two short paragraphs I click the back button.

Even worse are the ones that hide the demo in a mirrad of links. Almost trying to force you to read there ego blown shit in order to find the demo.

Or maybe I just had too much coffee today.

CrocoDillon

# February 24, 2013 at 5:37 pm

The latter.

What did you hear about Google Web Fonts? I’m using that! o.0

Andy Howells

# February 24, 2013 at 6:27 pm

@websitecodetutorials – Yeah fuck those bloggers with their free knowledge sharing! What egomaniacal pricks, sharing information, giving you explanations, how dare they! /sarcasm

chrisburton

# February 24, 2013 at 7:04 pm

Not all of Google’s webfonts are bad. I’ll even admit that and I’m probably their biggest critic on this forum. In fact, I am serving one they offer on my own site (but not through them). There are other reasons why I don’t use their service but I’m not going to get into that right now.

I believe that not just designers but developers should also care about the quality of rendering that webfonts output. If you take the time to test on multiple platforms for your layout, you should do the same for webfonts.

If I could recommend any webfont distributor it would have to be Webtype. Not only for quality but they really want your business so they do everything they can to accommodate you. Such as, I wanted to use Benton Modern RE regular and Benton RE italic styles but their license only offered 10,000 page views per month for $20 per style. That’s actually a pretty good package. However, at this point that’s even too large for my personal site at the moment while in development. I contacted them and they allowed me to do 5,000 page views per month for $15 per style. So to show my appreciation for working with me, I offered to throw in Benton Sans as well. It ended up working out perfectly since I needed a sans-serif too. Can you see Typekit doing that (don’t ask them, I ‘ve already tried)? Don’t get me wrong, I love Typekit, I’ve used them for a long long time but they’re not as flexible.

Font Squirrel is pretty good. They optimize their library just as Typekit does so I would recommend their service. I might actually switch to them from Typekit to serve a specific webfont on my own server. Anyway, I’m ranting.

I ❤ type

chrisburton

# February 24, 2013 at 7:08 pm

And to answer your question, what do you mean by “custom font”?

PicnicTutorials

# February 24, 2013 at 8:16 pm

Here is a very good round up of all the top font providers. http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/. I’m only using free so it looks like google font s it is.

PicnicTutorials

# February 24, 2013 at 8:44 pm

Google has 600+ fonts. Unless I’m missing something that seems more than adequate for any project.

PicnicTutorials

# February 24, 2013 at 8:57 pm

Actually @font-face it is. Much better in my eyes. http://sixrevisions.com/css/font-face-guide/

dfogge

# February 24, 2013 at 10:41 pm

“Every time there is more than one or two short paragraphs I click the back button.”

Hey nice attitude! :wtf:

JoshWhite

# February 25, 2013 at 1:00 am

> Google has 600+ fonts. Unless I’m missing something that seems more than adequate for any project.

Don’t mistake quantity for quality. I think what happens generally is that people get real excited about this massive FREE google library, get to using it, and then see the drawbacks when they are in the real world. If you want your projects to look more professional in the end with what I’ve seen as more universally stable results, I’d use something like Typekit and then fall back on something like Google if you need to.