SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beyond the basic fonts of Arial, Verdana, Geneva etc. How?

    I'm currently working on a site for a pub / restuartant chain. They already have a basic site which they are more than happy with the general feel / design of and would like me to stick to. I haven't designed the original but i am happy base the new site upon it.

    In the existing site the main navigation links have been made in a handwritten font style along with some various headings (the links and headings are actually graphics not text).

    I would like to use the same style of font for the links etc in the new site but i want to keep them as text for a couple of reasons.

    1. I believe that text based links generate better seo than graphic based links??

    2. A couple of the headings may need to be updatable and i would like to make them updatable via a php backend so would require the headings to be text based.

    My question then is:

    How can i deviate from the standard arial, verdana, geneva fonts which are generally accepted whilst ensuring the widest compatibility with browser versions etc.???

    Is it possible to embed a font for example?

    Any suggestions or thoughts much appreciated!... at the moment the font i want to use is Monotype Corsiva (which was installed on my XP pro machine as standard).

    Thanks

    James

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    You can use SIFR as a possible option, and there are other similar techniques which can be used to do what you're looking for.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave,

    do you think that sIFR is the best solution in respect to working across different browsers and their individual versions??

    I've looked at the site but still have a couple of questions:

    do the links appear as flash elements on the rendered page in a browser or do they still appear as true HTML?? i.e if you right click on them do you get the flash menu?

    Does it affect the indexing of pages and the links at all?? To my limited knowledge it isn't possible for a spider to crawl a flash element and index its content / links? I'm presuming a spider would only see the raw html prior to the converting of anything to flash??

    On another potential solution I found a few bits regarding the use of .eot fonts but this doesn't seem to supported much nowadays??? It appears easier than using the sIFR but i'm guessing its not going to be suitable for cross browser support?? what are your thoughts on this??

    I'm still a novice with lots of this stuff so don't want to cause myself to many headaches straight off!

    Thanks

    James

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would still prefer to use Arial or Comics Sans for the general font.

  5. #5
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For general text i plan to use verdana, the problimatic font is purely for the main navigation titles and a few headings. I would be happy to use images for these except for the issue originally outlined.

    Comic Sans remains me of preschool type books and such like which isn't a style i'd imagine the chain want to present!!!

  6. #6
    SitePoint Zealot Crey_Design's Avatar
    Join Date
    Oct 2008
    Location
    Scottsdale, AZ
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have the same problem. I'm always trying to find something different than the same old fonts that everyone uses. But I finally just came to conclusion that it's best to use a good, standard, readable font like Arial, Verdana, or maybe Lucida.
    Chris Reynolds
    Crey Design
    Arizona Web Design
    Personal Blog

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,800
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You could always just provide a list of alternate fonts in your style sheet. That way those who have the fancier fonts that your client prefers will see that text in that font. Those who don't have that particular font but have a similar one (assuming you list similar ones) will see it in that similar font. Those who only have the standard fonts will se it in whichever standard font you specified toward the end of the list of alternate fonts.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also use text/image replacement. The Glider-levins method is the most common, although from a purely SEO perspective the simple use of display:none should do the trick.

    The SIFR method recommended above works just like a regular text link. The Flash simply replaces that text in the same way that replacing it with an image does. The major advantage of SIFR is that you can still resize the text (or at least if you visit the page at a large text size it will be resized, you can't resize once on the page) and the text content can be copy and pasted. Neither of these features are possible with image replacement techniques ... actually, you could resize an IMG tag by specifiying it's width and height in EM's but that's generally not recommended as the image tends to distort.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •