How to get custom fonts working on website for others?

Discussion in 'HTML & Website Design' started by paidhosting, Aug 26, 2007.

  1. #1
    Hello,
    If you visit www.webdirectoryreviews.com and look at the navigation link on the left,you will see simple normal font there.

    But actually i have a custom font, and seems like it appears only to me and not to others as my computer has that font.

    Now the question is , how can you make sure people can see the font also, that is it gets stored or downloaded on their computer as temp. font so they can enjoy the font too ?

    Say i have font cola.tff on my pc and i want others to be able to enjoy and see it on the site how to go about it ?

    ^^ That seems to be the issue, any fix for the same?
     
    paidhosting, Aug 26, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    If it's the majority of the body copy that you want in that particular font, you should first try to feed it to people who have it like so :

    div#content p {
    font-family:'My Custom Font', Arial, Helvetica, sans-serif;
    }

    If someone has the font named 'My Custom Font' then it'll appear for all paragraphs in the content div.. if not then it'll skip to Arial. There are probably some proprietary methods to get the ttfs to download, but I recommend you do it the way above, since people are used to the normal web safe fonts Verdana, Arial, Helvetica, Tahoma and not used to the whole website being displayed in some custom font. That is the best method IMO.

    If it's just headings, then either make them background images or use sIFR.
     
    soulscratch, Aug 26, 2007 IP
  3. paidhosting

    paidhosting Peon

    Messages:
    4,822
    Likes Received:
    483
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Images take up lots of website space and slow the performance, and its just only for navigational links, and yes i have css using the font-family command already. But question is how to display the custom font on the visitors pc.
     
    paidhosting, Aug 26, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    Oh, if you're referring to the main navigation you have on the top left, then you should go with images (trust me on this).

    What you need to do is create the regular state and the hover state in one image, and then remove the background color from the PSD but remember the hexadecimal and use it as a matte color, that way it will be a very, very small as opposed to saving it with the background color.. save it as a GIF btw.

    Give each anchor an ID and set the background on the anchor.
     
    soulscratch, Aug 26, 2007 IP
  5. NineDesign

    NineDesign Peon

    Messages:
    237
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yup. If you try to tell (or even ask) the user they need to dowload a font just to view your website, chances are they wont view your website.
     
    NineDesign, Aug 26, 2007 IP
  6. hamish

    hamish Peon

    Messages:
    191
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I tend to use CSS image replacement techniques, so that the odd-fonted text is displayed for those with images enabled, and then have standard text for those with it turned off. There's lots of possibilities for doing this, such as negative margins, etc. Just google up 'css image replacement' for a variety of techniques.

    As soulscratch said, sIFR is a possibility as well.
     
    hamish, Aug 27, 2007 IP
  7. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You can set the font to auto download to visitors of the page however you first of all must have distribution rights to the photo otherwise it is breach of copyright and secondly people have to agree to have it installed - being honest, not many people will trust a website to install something on their PC unless they are a well known company
     
    AstarothSolutions, Aug 30, 2007 IP
  8. NoobieDoobieDo

    NoobieDoobieDo Peon

    Messages:
    1,456
    Likes Received:
    53
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You're better off using those fonts to make an image then make the images the menu items.

    Custom fonts are a bad idea.
     
    NoobieDoobieDo, Aug 30, 2007 IP
  9. 7Coder77

    7Coder77 Peon

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    i agree wholeheartedly, images are your best solution. If I visited your site and was prompted to download and install fonts, I'd be out of there like a Nun in a Brothel.

    In all honestly, creatively and carefully done "image fonts" can be made to look much better and do little to adversely affect your site performance. Its all in image optimization :cool: Good luck!
     
    7Coder77, Aug 30, 2007 IP
  10. Grumps

    Grumps Peon

    Messages:
    592
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #10
    The only way to get your desired font displayed is through images. Other than that, i doubt its possible yet.
     
    Grumps, Aug 30, 2007 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Take a look at sIFR if you want to use custom fonts on your Web page. As long as it's used SPARINGLY (with capital letters), you'll be fine.
     
    Dan Schulz, Aug 31, 2007 IP
  12. mikestrand

    mikestrand Active Member

    Messages:
    237
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #12
    SIFR is good for headlines and smaller lines of text but for links it can be quite troublesome. There is nothing wrong with using an image navigation consisting of GIF images and using css to hide text and only show said text if the images do not load.

    Try searching around the next for css image replacement techniques and adapt one to yours.
     
    mikestrand, Aug 31, 2007 IP
  13. paidhosting

    paidhosting Peon

    Messages:
    4,822
    Likes Received:
    483
    Best Answers:
    0
    Trophy Points:
    0
    #13
    See guys i am more worried about my directory rank See the title on the right like indie coffee house, they are not static , and depends on the stats and you can have different site sitting there, hence images will not cut it, as its not static its got a dynamic nature. So, need something that will parse images according to font, maybe some php script can do it ?

    [​IMG]
     
    paidhosting, Aug 31, 2007 IP
  14. garazy

    garazy Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Hey,

    I would recommend either changing the font or using sIFR as recommended (although this still won't allow you to use this font it will just ensure everyone sees the font the same (firefox, ie, safari etc..).

    G
     
    garazy, Aug 31, 2007 IP