Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fonts on websites

Discussion in 'Website Design Forum:' started by TomStutt, Feb 3, 2010.

  1. TomStutt

    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

  2. Levi

    Levi Moderator Staff Member

    look into @font-face but remember licensing restrictions on any fonts being used.
  3. Harry

    Harry Senior Member

  4. matt

    matt Member

  5. rossnorthernunion

    rossnorthernunion Senior Member

    sIFR not an option you can pursue?
  6. Renniks

    Renniks Senior Member

    sIFR is no better than @font-face with all major browsers (including ie6+) using it (if tailored properly) 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.
  7. mike_watts

    mike_watts Member

  8. Harry

    Harry Senior Member

    Do you mean actual images, as in <img />?
  9. Alex L

    Alex L Senior Member

    You can get php scrips to change it all for you but I've steered clear of them.
  10. glenwheeler

    glenwheeler Senior Member

  11. Hoxxy

    Hoxxy Junior Member

    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.
  12. 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?
  13. Harry

    Harry Senior Member

    Show them Type Tips&mdash;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.
  14. Yeah, started off with pt size and that went down like a lead balloon. Have resorted to trying to explain it with percentages.
  15. Goreki

    Goreki Member

    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.

    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.
  16. Bexxie

    Bexxie Junior Member

    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.
  17. malcolmDesign

    malcolmDesign Junior Member

    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?
  18. Harry

    Harry Senior Member

    Uh oh :(
  19. Kevin

    Kevin Senior Member

    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.
  20. Harry

    Harry Senior Member

    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.

Share This Page