When someone wants custom fonts in content what do you suggest?

[thewpguy]

I have started looking into best options for adding a font to a WordPress site in posts and pages.

So far I see Cufon and Typekit coming up as solutions.
Are they still the best option or have things changed, new plugins or practices evolved?

Its an area that I try and avoid and stick to the built in fonts but I get some people who just must have a specific font to have the style just so.

Any help, advice, pot holes to avoid etc would be awesome.

[Ryan]

If they want to alter ALL of the text on their pages, then either tell them it is not possible to do in a "reasonable" fashion or suggest that use @font-face in their CSS. This won't work in many browsers but at least it's not going to slow the page loads down horridly like all other options.

http://www.css3.info/preview/web-fonts-with-font-face/

For cross-browser compliant headings you are generally best off using image sprites where possible but of course that won't (without a whole bunch of extra effort) work with text entered via their WordPress admin panel, so for those purposes your best options are Cufon or SiFR.

[thewpguy]

Thanks for your quick reply Ryan,
I really appreciate the help as this is an area I am still discovering. I will probable try out cufon and see what happens.
Somehow I think that looks over performance will be their priority so best to try and keep them happy.

thanks again

[Ryan]

I'm guessing this isn't going to work in your situation since you've automatically looked at Cufon, but if you do things like headings with a giant sprite, you can generally do it in a very efficient manner which has a negligible increase in the page load times and will work flawlessly cross-browser back to IE5. The only catch is that you need to manually make the images yourself or find some way to dynamically create them on the fly via the server (I have no idea how to do that).

I often do this for clients dropdown menus when they want some crazy looking font. Many of them try to do it themselves via Cufon, SiFR or by using separate images for each menu item and it always ends in tears, either because they're loading WAYYY too many images on each page or because Cufon/SiFR has borked their menu in the process.

I've seen some sites brought to their knees by inappropriate use of Cufon and SiFR because the dumb ass site owner decided that stylise ALL of the text on their site, not just a couple of headings here and there.

[thewpguy]

The headers and menu items are staying as normal I thing its actually just the content of the posts that needs to be different. Is cufon going to be useless/unstable long term in that use case?

Would I be safer to try typekit for post text?

thanks again for you insights.

[Ryan]

I don't know much about TypeKit but I was under the impression (could be wrong) that it's just a selection of fonts you are allowed to use on your site via the @font-face CSS rule. In which case yeah, it's definitely a massively better option for the main post text.

@font-face just behaves like font-family, but allows you to include any font you want. It doesn't work on older browsers is the only problem.

EDIT: Yep, TypeKit just seems to be a place to get web suitable fonts for using with @font-face. More information available here ... http://typekit.com/about

[Otto]

Use the Google Font directory and API: http://code.google.com/webfonts

Adding fonts using Google's servers is trivial and you're guaranteed good uptime.

Also, Google's Fonts are all guaranteed to be royalty-free and safe to use.

[thewpguy]

Thanks for the tip Otto I will look into that option too. Much appreciated.

[Ryan]

Good idea Otto. That's probably a better option than TypeKit.

I'm not sure why, but the Google fonts recommend inserting a full link request in your HTML whereas I suspect you would be much better off just inserting the @font-face rule directly to your sites main CSS file, something like this:

@media screen {
@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA') format('truetype');
}
}

You could also serve the fonts direct from your own server, but it would be a good idea to rely on the Google provided hosting to make sure they load nice and snappy for users who already have them cached from other sites.

[Otto]

I'm not sure why, but the Google fonts recommend inserting a full link request in your HTML whereas I suspect you would be much better off just inserting the @font-face rule directly to your sites main CSS file...

No no, absolutely do not do that. That will break things.

See, the font-face code they produce is generated dynamically. They use browser detection to serve the proper font for your browser. The truetype code you posted is what you see in Firefox or Chrome or whatever. IE doesn't do truetype fonts. The CSS IE gets would look like this:

@font-face {
  font-family: 'Cantarell';
  src: url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA');
}

And the URL, though the same, would return an EOT file instead of a TTF file.

Use the link HTML or use the @import method in your CSS. Don't try to bypass that call to Google's font servers, they're doing a lot of extra work there so you don't have to.