Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Custom Fonts

  1. #1
    Senior Member stu2000's Avatar
    Join Date
    Jan 2009
    Posts
    566

    Default Custom Fonts 9 Sep 2010 @ 10.35

    Hi all,

    A quick question about adding non standard fonts to a website. I normally pick a default font that's pre-installed on Windows and Mac to avoid any issues, however what's the best way to go about adding fonts that your users may not have and is it a good idea for display / coding / SEO etc?

    Thanks!

    Stu
      Reply With Quote

  2. #2
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 9 Sep 2010 @ 11.06

    You can use the new @font-face rules that will come with CSS3 to add any font you like:
    CSS Fonts Module Level 3

    Code:
        To use a downloadable font called Gentium:
         @font-face {
      font-family: Gentium;
      src: url(http://site/fonts/Gentium.ttf);
    }
    p { font-family: Gentium, serif; }
    
        The user agent will download Gentium and use it when rendering  text     within paragraph elements. If for some reason the site serving the  font     is unavailable, the default serif font will be used.
    You also need to make sure you have a good font-stack back up for those browsers that don't yet support this.
      Reply With Quote

  3. #3
    Senior Member stu2000's Avatar
    Join Date
    Jan 2009
    Posts
    566

    Default 9 Sep 2010 @ 11.13

    merci beaucoup, I shall go have a play!

    Stu
      Reply With Quote

  4. #4
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 9 Sep 2010 @ 11.26

    In technical terms, the best option is probably the Google Web Font Loader. I believe this is as close to raw @font-face as you can currently get (cross-browser).

    None of the custom font solutions should affect SEO. In coding terms, they all look reasonably self-contained and maintainable. I haven't actually tried any of them yet, however.

    Bear in mind that, even with pure @font-face, the font files still take time to download. Font files can easily be 60 kB even after gzipping. Steve Souders has a good summary of @font-face performance issues.

    Personally, I'd avoid using them for the sheer hell of it. Only use custom fonts if the design calls for it.
    Last edited by Mike Hopley; 9 Sep 2010 at @ 11.49.
      Reply With Quote

  5. #5
    Senior Member stu2000's Avatar
    Join Date
    Jan 2009
    Posts
    566

    Default 9 Sep 2010 @ 11.39

    Thanks for that, I agree I always try to use the a font that most people have on their systems already and as a result this gives a 0 second download time for the font and there's no browser / OS issues etc.

    I just have a client insisting on some funky fonts and I remember aaaages ago looking at embedding fonts and it was an absolute nightmare! WEFT or something like that, I can't remember the exact name t'was years ago. Someone suggested using it but I didn't get on with it at all!

    Thanks, I remember seeing the Google font API not too long ago, I'll go back and re-visit that too!

    Cheers!
      Reply With Quote

  6. #6
    Senior Member stu2000's Avatar
    Join Date
    Jan 2009
    Posts
    566

    Default 9 Sep 2010 @ 13.15

    I've just noticed a small flaw there, the Google Font API doesn't work on Flock 2.6.1

    I thought it was a bit odd that all the fonts looked the same! lol
      Reply With Quote

  7. #7
    ian
    ian is offline
    Member ian's Avatar
    Join Date
    Jul 2010
    Posts
    201
    Blog Entries
    1

    Default 9 Sep 2010 @ 13.57

    @font-face isn't CSS3 only. It was in CSS2.0 and then removed from CSS2.1. That said, it's supported by IE, even IE6.
      Reply With Quote

  8. #8
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 9 Sep 2010 @ 14.39

    quote
    That said, it's supported by IE, even IE6.
    Originally Posted by ian View Post
    True, but there are significant differences in the way browsers support it:

    In the Woods – How to Achieve Cross-Browser @font-face Support


    quote
    I've just noticed a small flaw there, the Google Font API doesn't work on Flock 2.6.1
    Originally Posted by stu2000 View Post
    So 0.001% of your users will get a fallback font.
      Reply With Quote

  9. #9
    ian
    ian is offline
    Member ian's Avatar
    Join Date
    Jul 2010
    Posts
    201
    Blog Entries
    1
      Reply With Quote

  10. #10
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 9 Sep 2010 @ 15.31

    quote
    Originally Posted by ian View Post
    Er...congratulations?
      Reply With Quote

Page 1 of 2 12 LastLast

Similar Threads

  1. custom gallery
    By sudhakararaog in forum HTML & CSS
    Replies: 1
    Last Post: 25 Nov 2010, @ 00.40
  2. wordpress - add custom field images to rss feed
    By WelshStew in forum Content Management Systems, Blogs & Forums
    Replies: 7
    Last Post: 26 Feb 2010, @ 16.01
  3. Custom Bullets How to add them...?
    By Wrams in forum HTML & CSS
    Replies: 16
    Last Post: 8 Sep 2009, @ 20.41
  4. zen cart + custom php issues
    By bonnit in forum Content Management Systems, Blogs & Forums
    Replies: 4
    Last Post: 6 Aug 2009, @ 22.26
  5. Custom wordpress theme integration
    By Jacob in forum Free Reviews & Showcase
    Replies: 4
    Last Post: 28 Jul 2009, @ 22.42

Tags for this Thread

Posting Permissions

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