Custom font on a WordPress site.

March 21, 2008 8:51 AM

How to use a custom font on a web page that uses CSS

I have a WP site that I am editing for a friend, and he would like to use a custom font for the text. How can I do that with CSS? The font he wants to use is very unique and almost no one will have it in their fonts folder. How can I make his site look as he wants, without using flash?

posted by photodegas to media & arts (16 comments total)

are you using this font all over the shop or just in a few places (navigation elements etc)

If it's just in a few places, write your bits with that font in Photoshop, and use the image there.

That's what I'm having to do on a website I'm building right now where the clients want to use a rare font. It makes the appearance consistent across browsers.
posted by By The Grace of God at 8:53 AM on March 21, 2008

You cannot. (Apple has threatened this with future version of Safari, however.)
posted by unixrat at 8:54 AM on March 21, 2008

You can with SIFR, which is not super easy to set up but does allow this sort of thing, with graceful fallback to showing regular text if Flash or Javascript is not available.
posted by voidcontext at 8:58 AM on March 21, 2008

Aaaargh I didn't read your last line, I am a bad person.
posted by voidcontext at 8:59 AM on March 21, 2008

If you don't mind using an outdated tool that barely works on IE and not at all anywhere else, you could use WEFT (web embedding fonts tool).

My advice? Use sIFR, images or don't bother even trying.
posted by Memo at 9:05 AM on March 21, 2008

Flash, WEFT (basically moribund), CSS2 (will never be implemented anywhere useful), CSS3 (not yet implemented anywhere useful), or replace the font with images.

I'd go the script-rendering-text-as-image route. At least that way you get the alt text.

<img src="font.php?t-Hello+World" alt="Hello World"/>
posted by Leon at 9:09 AM on March 21, 2008

@unixrat: The future is here. All of the CSS3 @font-face samples in that article will render under Safari 3.1... Of course, this doesn't help the OP, since no other browser currently supports it.
posted by strangecargo at 9:10 AM on March 21, 2008

Let's say you want to make a subhead on your page that says "Available Colors", and you want that phrase to show up in a custom font. You want to write the text in Photoshop, crop it to size (let's say 250 pixels wide by 75 pixels tall), and save it as a GIF, preferably with a transparent background. But you do not want to just use an IMG tag to insert the GIF into the page -- otherwise, screenreaders like JAWS and search engine spiders alike can't read the text, because they would just see an image. So do this in your CSS:

h3#available-colors {
margin:0;
padding:0;
background:url(/path/to/file.gif) top left no-repeat;
height:75px;
width:250px;
text-indent:-99999px;
}

And do this in your XHTML:

<h3 id="available-colors">Available Colors</h3>

Now your page has a nice-looking graphic, utilizing your favorite font, for the subhead text -- but the text is still perfectly readable even if graphics and CSS are turned off or unavailable.

(Hat tip: Mike Rundle.)
posted by Asparagirl at 9:13 AM on March 21, 2008 [8 favorites has favorites]

@strangecargo: Aiiiieeee!
posted by unixrat at 9:38 AM on March 21, 2008

Asparagirl has the answer, if you're not willing to use sifr.

If it's for wordpress, though, I imagine it's going to be content that your friend will be writing on his own, say, the titles of new blog entries. In that case, if you really want to do this, you're going to have to use sifr to generate the headlines. Which means you need flash.

But if it's some sort of content that isn't going to change very often, the method Asparagirl describes is both accessible AND pretty.
posted by kpmcguire at 9:53 AM on March 21, 2008

Sounds like Dynamic Text Replacement might be just what you are after.

Far better than the Photoshop route, because once you have set it up your friend can add new headings as easily as if were he using Arial, Georgia or the like.

I used DTR for a site I once made, and it seemed easy enough to use. I haven't used (the apparently much more popular) sIFR, so can't compare the two, but only one meets your 'no Flash' criteria.

(If anyone has used both approaches I would be very interested to hear your appraisal of each. I have been tempted to give sIFR a go simply because of the weight of numbers using it. But I was very happy with the results of using DTR, so suspect I'm simply falling for the old grass is greener fallacy...)
posted by puffmoike at 9:55 AM on March 21, 2008 [1 favorite has favorites]

Be careful with all these techniques. Aside from WEFT (which only works in IE.. grr), none of the solutions are meant for large bodies of text. In other words, you can use sIFR or DTR or CSS Image Replacement for your headlines, but don't use them for entire posts.

I looked at the page and he had replaced every single word with sIFR text… even complete paragraphs and 300-word passages. Do not do this please! sIFR is for headlines, pull quotes, and other small swaths of text. In other words, it is for display type — type which accents the rest of the page. Body copy should remain browser text.
-- Mike Davidson

DTR and CSS IR essentially replace blocks of text with images. The larger your text, the larger your image. As you might guess, if you're writing many pages of text in your custom font, the images can add up to multiple megabytes, and the page becomes sluggish.
posted by theiconoclast31 at 10:11 AM on March 21, 2008

Please note that if you do use sIFR (which is really the best way to do this, if you must), people who have flash blockers will have to click each piece of text to display it. There will be no graceful fallback to regular text.
posted by odinsdream at 10:26 AM on March 21, 2008

what's the font? There may be something that looks like it available.
posted by muscat at 10:36 AM on March 21, 2008

Screenreaders such as JAWS read alt text - adding alt text to graphics where appropriate is Accessibility 101. More of an issue is the fact that if a user with low vision has their default font size bumped up, it won't enlarge the image. So it may not be readable.

Opera and IE7+ can zoom in on the whole page, and there are specialized programs such as ZoomText to do this as well. But at high magnifications, bitmapped text looks godawful. It gets harder to read the more it's magnified. sIFR handles this problem OK - the text scales more gracefully.

Users who require high contrast may have custom stylesheets or system settings that change everything to yellow on black, for example. Again, text rendered as image is not affected by these settings. At best, the images look really wacky in the changed environment. At worst, a transparent image background could make the text effectively invisible.
posted by expialidocious at 10:50 AM on March 21, 2008

Really, your friend is going to have to work within the realities of the platform. That's just life.

The best compromise is to do the sidebar headers in PhotoShop with alt text in your snazzy font, use SIFR for the entry headlines in the same font, and use helvetica, verdana, arial, times new roman, etc for the entry body text.
posted by DarlingBri at 11:02 AM on March 21, 2008