Fonts on websites

TomStutt

Senior Member
Hi all

I hope someone can help. Im doing a re-design of my site and I want to have a font on there that isnt a standard one.

It will be used for my navigation and headings. If i add it in my font family it goes to the next font which i have as arial.

Can someone please tell me how to do this

ta
 
sIFR is no better than @font-face with all major browsers (including ie6+) using it (if tailored properly)

www.fontsquirrel.com is a great resource for fonts & font-face setups. I would however like to add that the font-face kits they supply do not have svg files which are necessary for chrome (why, I dont know :( )

And I re-iterate what Levi said, be careful on legalalities of the fonts you use if you use font-face. It's popular life is very early on and I imagine there are lots of people trying to find illegal (against copywrite) fonts being used.
 
I use Cufon on a couple of personal sites and in general its great but as mike_watts mentioned its not selectable, other then that little pitfall its super fast and a lot better (imo) then sIFR.
 
Does anyone have any suggestions dealing with clients who have little understanding of fonts and font-sizes on sites?

My business is currently working on a site - and the client keeps coming back with the usual 'make it a bit larger' or 'the font on page xxxx needs to be bigger' etc etc

I've tried with a long list detailing those fonts and sizes across the site and on specific pages but they just replied that they are 'not technical' and I've arranged a face to face meeting.

My two ideas are create a series of dummy pages with some alternatives - ie different fonts / sizes etc or alternatively do this away from the computer and demo them via screen grabs and old fashioned paper!

Any thoughts folks?
 
Show them Type Tips—short, quick tips on all things web typography from Harry Roberts of CSS Wizardry ;)

And regarding font-sizes:

1) Use a typographic scale—set up a scale of sizes to use (12pt, 16pt, 18pt, 20pt, 22pt, 24pt for example).
2) Tell them that type can be any one of those sizes—this enforces a hierarchy and more importantly consistency. Making loads of different sizes will only add confusion 'This is 17pt but this is 23pt. This is more important than both but not as important as this other one at 27pt, so make a new one at 25pt.' S'just silly innit.
 
One thing you might have to be careful about with using @font-face, some browsers are very fussy on the location of the font (mainly Firefox if I remember right). So it is best that you keep the font file in the same directory as your .css file.

Also, Typekit is great for some legal alternatives.

Renniks said:
Font Squirrel | Handpicked free fonts for graphic designers with commercial-use licenses. is a great resource for fonts & font-face setups. I would however like to add that the font-face kits they supply do not have svg files which are necessary for chrome (why, I dont know :( )

That's quite strange, I use font squirrel to create some of my own packs and the svg files it produced seem to be working with Chrome perfectly.
 
I've used Cufon which is easy to use and has pretty good browser support. I've also been playing around with Google webfonts which is also easy to use but you're limited by the fonts that they host.
 
why not just go to illustrator and create text as outlines (or create text in photoshop) and place the text as images instead. This way, if someone doesn't have your font when browsing, they will still see the look you wanted?
 
malcolmDesign said:
why not just go to illustrator and create text as outlines (or create text in photoshop) and place the text as images instead. This way, if someone doesn't have your font when browsing, they will still see the look you wanted?

Things have changed in the past six to eight months. If the visitor/client is using a modern browser, using @font-face is the way to go. That's why everybody is encouraging people to upgrade their browsers, and as a designer it's your job to try and make all of your clients do the same.
 
Onartis said:
Things have changed in the past six to eight months. If the visitor/client is using a modern browser, using @font-face is the way to go. That's why everybody is encouraging people to upgrade their browsers, and as a designer it's your job to try and make all of your clients do the same.

This isn't months old, it's years old.

You should never use images (<img />) for text on sites because a) it's not semantically correct b) images can't be scaled (ctrl + +/-), c) images' contrast can't be changed, so visually impaired/colour-blind users are stuck with whatever the image dictates d) images can't be highlighted like regular text can, thus creating a usability issue.
 
Back
Top