SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Cape Town
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can I get the same font to show on a website being viewed on different operating

    Hi there guys

    how can I get the same font to show on a website being viewed on different operating systems and different browsers.

    I unfortunately have the font installed on my operating system and when I check my website on a different operating system the font does not show at all and is being replaced by the default font used by the operating system.

    My website link: www.ca-design.co.za

    I have used the <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rockwell">

    But this does not appear on other computers when I view it.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,710
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Crispian View Post
    how can I get the same font to show on a website being viewed on different operating systems and different browsers.
    The people in the CSS forum will have some good advice for you about that. Basically though it means being flexible in regard to which fonts you want used, listing them in order of preference.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Cape Town
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay great. That makes more sense. Thanks for the advice

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    As you found you can't that way. That is unless you use the 5 basic safe fonts. You can use "google fonts" or "font sqiurl" to serve up the same font on all computers. There are others but I think those two are the easiest.

  5. #5
    SitePoint Member Knight Yoshi's Avatar
    Join Date
    May 2012
    Location
    Tampa, Florida, United States
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    As you found you can't that way. That is unless you use the 5 basic safe fonts. You can use "google fonts" or "font sqiurl" to serve up the same font on all computers. There are others but I think those two are the easiest.
    You don't have to use web-safe fonts, Google fonts, or whatever Font Squirrel is. All you need to do is use the CSS3 @font-face rule and you can call a font from your server, which is far better than calling it from another domain and CSS3 supporting browsers will read it.
    Another problem with calling fonts from other domains unless it's specified in the .htaccess file that it's okay to be used, Firefox will not download the font to use. This is to prevent violations of the EULA on the font (or something to that nature).

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Crispian View Post
    I have used the <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rockwell">

    But this does not appear on other computers when I view it.
    Well, it should, as you are getting the font from Google ... although Google fonts are a bit wobbly in my experience.

    As an aside, make sure to include some other fallback fonts in your list to have some control over what people see on computers where the Google font doesn't work. At a minimum, something like

    font-family: rockwell, serif;

    but preferably

    font-family: rockwell, "times new roman", georgia, serif;

    etc.

    FontSquirrel has a great selection of web-ready fonts that you upload to your website and serve via @font-face, which has solid support across modern browsers (even IE).

    As an aside, you are using some really outdated code there, like <font> etc. You have some homework to do.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Rockwell is a Monotype font, not a google font. You have to pay Monotype to use their web fonts.

    Why don't you try google's Arvo?

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Knight Yoshi View Post
    You don't have to use web-safe fonts, Google fonts, or whatever Font Squirrel is. All you need to do is use the CSS3 @font-face rule and you can call a font from your server, which is far better than calling it from another domain and CSS3 supporting browsers will read it.
    Another problem with calling fonts from other domains unless it's specified in the .htaccess file that it's okay to be used, Firefox will not download the font to use. This is to prevent violations of the EULA on the font (or something to that nature).
    FYI. With both serices mentioned you can use @font-face

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zot View Post
    Why don't you try google's Arvo?
    Good suggestion. I think I made a mistake above. Rockwell is working on my machine because I have it installd (I didn't think I did. )

    You can get Arvo at FontSquirrel too, which is what I'd recommend:

    http://www.fontsquirrel.com/fonts/arvo

    Grab the webfont kit from there and you'll be good to go.

  10. #10
    SitePoint Member Knight Yoshi's Avatar
    Join Date
    May 2012
    Location
    Tampa, Florida, United States
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    FYI. With both serices mentioned you can use @font-face
    I know you can with Google fonts, I don't know what Font Squirrel is, but using Google fonts adds another cross domain HTTP request. Which may not seem like very much, but if you have a page that is making several requests already the last thing you want is to make another request to another domain. Remember same-domain requests are faster than requesting content from another domain.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Knight Yoshi View Post
    I don't know what Font Squirrel is
    It's a site that offers lots of free fonts, including fonts ready for use on a website via @font-face (with all font versions ready to go, as well as the CSS required to link to them). It also has a web font generator that prepares desktop fonts for use on the web.


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
  •