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

HTML & CSS
1

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

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.

3

Okay great. That makes more sense. Thanks for the advice

4

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

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

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. :slight_smile:

7

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

FYI. With both serices mentioned you can use @font-face

9

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. :blush: )

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

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

10

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

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.