0

I currently have a top header on my website that is an image with some text on top but the text was added on photoshop onto the image. I now need to make the text dynamic so i have removed the text as part of the image and adding it through on top of the blank image:

<span style="font-family: Bookman Old Style;
font-size: 23px; 
position: absolute; 
left: 160px; 
top:20px">
My Site Top Header
</span>

I am able to replicate the exact same view on my machine but is there a concern that a user doesn't have this font family and it will default to some ugly font instead? I know all of my users are using Windows PCs with either latest Chrome / Firefox or IE 11.

Frank W.
  • 777
  • 3
  • 14
  • 33
leora
  • 188,729
  • 360
  • 878
  • 1,366
  • Related: [How can I detect which font was used in a web page?](http://stackoverflow.com/questions/845/how-can-i-detect-which-font-was-used-in-a-web-page) – Michał Perłakowski Feb 13 '16 at 23:20

4 Answers4

2

There's no way to guarantee that users will have that font installed. You could license the font as a web font and then deliver the web font along with the page. As fonts go, it's not particularly expensive, so that might be a reasonable option. There is still the minor issue that many ad blockers also block web fonts, so if your users have ad blockers installed, they wouldn't get the web font either.

The bottom line is that you should specify a fallback font that isn't "ugly" and not worry about it. Combined with a web font, you'll likely have nearly all the bases covered.

Stephen Thomas
  • 13,843
  • 2
  • 32
  • 53
2

You can declare multiple fonts using the font-family rule. If the first font on the list is not available, the next will be used as a fallback. For example, if you set your font-family to the following:

font-family: 'Bookman Old Style', Arial, sans-serif;

the browser would at first try to load Bookman Old Style font, and if not available, it would try to load Arial font, and if it's not available too, it would load the default sans-serif font.

So when the user doesn't have this font installed, you can choose similar font which maybe is installed, so your webpage wouldn't look so ugly.

If you own this font (i.e. either it's free or you bought it), you can use @font-face declaration to include it on your page. For example:

@font-face {
  src: url("http://example.com/your-font.woff2");
  font-family: 'Your Font';
}
body {
  font-family: 'Your Font', Arial, sans-serif;
}

In this case browser will fetch the font from the URL you specified and apply it to <body>. If the request for font fails, or before the font has been loaded, browser will apply the fallback font (i.e. Arial).

See also:

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
1

In order for users to see your font on the website on their machine, you must include your font with your website. There are multiple ways to do so.

You can do the following using the font-face rule:

<style> 
@font-face {
    font-family: myFirstFont; // pick a font name to use in your file
    src: url(sansation_light.woff); // relative font file location
}

div {
    font-family: myFirstFont;
}
</style>

Source: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Ziad Alame
  • 772
  • 6
  • 16
0

The best method for guaranteeing that all your visitors/users have the font you want is to provide them with the font.

Before providing them with the font you want to pick one that your have a license for or a free font. One of the better sources for free fonts is Google Fonts: 1

Once you have a licensed or free font ready to supply to your visitors/users, you can deliver the font to your visitors using @font-face (see for methods of delivering the font to the users/visitors: Preloading Google Fonts )

Michael Moriarty
  • 831
  • 13
  • 16