non standard web fonts
- Started
- Last post
- 22 Responses
- polly_pocket
Hey guys,
I wondered if any of you might be able to advise, if there are any ways of using non standard web fonts in a site with effective results?
I've noticed that a lot of web sites are using fonts that are not the normal arial, times etc that you would use on a site, eg
http://www.jeroenhoman.com/#work…I hoped to use the same font as my logo throughout my site as titles etc, but am currently using a picture of the font instead. Just wondered whether there is a way around this?
Apologies if this sounds really 'dur'. And thanks in advance for any help.
- Jordy0
Look into those things:
- Cufon
- sIFR
- @fontface
- TypekitGoogle those terms and read about the pros and cons.
That's the way to go.
- those are 4 techniques to use non webfonts on your site.Jordy
- You *can* convert any font to Cufon, but it may violate the license. Contact the font maker first.Typographica
- polly_pocket0
ok, cool. thank you. x
- polly_pocket0
personally, do you think its worth it?
- Jordy0
yes it is SO SO SO worth it.
I would personally go for cufon .. but it has to be a free font in that case or a font with a EULA that does not prohibit this, otherwise use sIFR...
If you wanna spend money use typekit
If you don't care about older browsers use @fontface (typekit also uses this)
- there's lots to read up on and there's no standard answer in this case.Jordy
- polly_pocket0
ok, great advice. thanks guys. this has opened up a whole new way of designing to me. great stuff!
- RoyBoyII0
The Easiest Way to Use Any Font You Wish
- ukit0
Jordy is right, it's in a state of flux right now and eventually other techniques will probably be used but for now Cufon is the way to go. The nice thing about Cufon is that it's super easy. Just go here:
http://cufon.shoqolate.com/gener…
Download the font file it generates as well as the Cufon Javascript file and link those two files on your site, along with JQuery if you don't already have it.
Then all you need to do is add a SCRIPT tag like this:
$(document).ready(function(){
Cufon.replace('.logo', { fontFamily: 'Leitura Italic' });
});
- polly_pocket0
ok. I've had a look at cufon and the font i hoped to use isn't there. I assume this is because its not a free font. tricky.
Lots of reading ahead.
:)- You can run any font through a converter which creates a cufon-compatible js file********
- http://cufon.shoqola…********
- Actually just read what I posted above, that's everything you need to knowukit
- sorry ukit - didn't notice the link in yr post********
- You *can* convert any font to Cufon, but it may violate the license. Contact the font maker first.Typographica
- You can run any font through a converter which creates a cufon-compatible js file
- ********0
I would add; don't go overboard with cufon - it's nice, but it does reduce responsiveness.
If you want to use specific fonts on _static_ text - which isn't going to change throughout the lifespan of a site - stick to image replacement.
Use cufon for any text which is dynamic or user editable.
- + cufon should really only be used for headings and decorative text -> definitely not body text.********
- + cufon should really only be used for headings and decorative text -> definitely not body text.
- Jordy0
@lukus_w
Never ever go for image replacement if you want you text to be indexable by search engines (esp. Google)
But yes do only use Cufon for headings, and not for body text, unless it's two lines of text.
For examples how cufon is used, look here:
http://wiki.github.com/sorccu/cu…@polly_pocket: you probably looked a TYPEKIT and the font was not there in their library. Cufon will work with *any* font. The thing is just that it might not be legal if it's a licensed font.
- polly_pocket0
ok, I went onto the cufon site and it says 'select a font' then takes you to your font library on your computer.
Then, the font is wish to use 'clarendon' (which is on my computer normally), doesn't show up on the list. Maybe I'm missing a trick there?
- Jordy0
it needs to be a TrueType or OpenType / TTF or OTF file, otherwise you can't do it.
well you can convert other font files but that's a different story..
are you on mac or pc?
- Jordy0
here: read the small print:
On Windows, you may first have to copy the font file out of the Fonts folder and paste it elsewhere in order to be able to select it.
Currently only TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts are supported. Files are disposed of immediately after conversion.
- ********0
@Jordy;
Replacing text with images using CSS is staple technique used by most front-end web developers. When an image replacement technique is used, the text is either hidden or moved off screen, and an image is put in it's place using CSS.
Because the text is still available on the page, and the image is only made viewable using CSS, the text is still fully indexable by search engines.
In many cases, this text can also even be accessed by visitors who use screen-reader software.
There are many different flavours of image replacement (IR) - it's worth researching which are available, because there's usually a degree of compromise involved with each.
In actual fact, cufon itself makes use of a form of image replacement to replace text with either a VML or canvas rendering of whichever typeface has been chosen.
- polly_pocket0
ah. sorry.
- polly_pocket0
wow. thanks lukus_W. That is really helpful!
- Jordy0
@lukus_w:
ah yeah in that sense you're right. I thought you literally meant putting images in your headline divs. Still it's seen as a bit of a "dirty" way of doing it when you move text off screen, but yeah it's still possible.
- ********0
typekit.com i want this
- polly_pocket0
thanks for all your help on this. really appreciate it.
- johndiggity0
also, make sure the eula for your font allows cufon embedding. i know that most major foundries DO NOT allow cufon embedding of their fonts.