My website won't show the fonts I've selected

Embedding Custom Web Fonts

http://alt-web.com/Articles/Custom-Web-Fonts.shtml

Nancy O.

Love,

You may use the CSS to offer a priority list of fonts by having something like this specified for each different kind of heading and body text:

h1  {color: black; font-style: italic; font-weight: bold; font-size: 42px; font-family: NewBaskerville, New Baskerville, Garamond, Bodoni, Georgia, "Times New Roman", Times; text-decoration: none; padding-top: 10px; padding-right: 10px; padding-left: 10px; border: none}

In this case, the visitor will see New Baskerville if installed, if not then Garamond if installed, if not then Bodoni if installed, if not then Georgia if installed, if not then Times (New Roman) which seems unavoidable.

In other words, you may bring the best possible choice of font to each visitor. It is best to include different possible name versions, as done above.

This obviously shows a list of serif fonts; for a script font like Vivaldi, it may be a bit more difficult.

Practically every personal computer has a set of fonts installed. These fonts are usually put there by the computer manufacturer or are the default sets of fonts for the operating system that computer is using. It's possible to install additional fonts on your own. However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference. When you are designing a Webpage, you need to keep this in mind. If you decide to use a font on your page that a visitor doesn't have, that font will render differently (and often unattractively) on the visitor's machine.  Use Web safe fonts. As computing evolves, considerations for the Web have taken effect for modern operating systems and Web browsers. Among these considerations is a list of Web safe fonts that Web designers can use to make sure their fonts render properly. Web safe fonts are a set of highly common fonts that come installed on just about every computer out there.

Alternate way can be use  fonts as an image:

When you use an image editor like Photoshop, The GIMP, or even MS Paint, you can create images that use any font you like. Put the image on your page and it will look the same on a visitor's computer as it does on yours. Below is an image that uses three non-Web-safe fonts that came pre-installed on my Macbook.

Try this

          #header {

              width: 250px;*// Must be replace as per the requirement

              height: 30px;*// Must be replace as per the requirement

              background-image: url(irt.gif)*// Must be replace by your image file;

              }

          #header span {

              display: none;

              }

                    implement the image replacement with this in your HTML:

                    <h3 id="header">

              <img src="spacer.gif" alt="Image replacement techniques" />

              <span>Image replacement techniques</span>

          </h3>

I hope this solves your problem