font-family: "ITC Avant Garde Gothic" not working in CSS

Question

I have a text from an image whose font-family is "ITC Avant Garde Gothic"

I tried putting this font-family in my CSS but unfortunately I cant see any change.

I am wondering, do I need to add something else in my CSS for the working of font-family.

The CSS code which I have is:

{
  font-size: 7.433px;
  font-family: "ITC Avant Garde Gothic";
  color: rgb(255, 255, 255);
  line-height: 2.348;
  text-align: center;
  -moz-transform: matrix( 1.81893039778896,0,0,1.8236290753447,0,0);
  -webkit-transform: matrix( 1.81893039778896,0,0,1.8236290753447,0,0);
  -ms-transform: matrix( 1.81893039778896,0,0,1.8236290753447,0,0);
  position: absolute;
  left: 45.265px;
  top: 181.274px;
  z-index: 127;
}

Unfortunately, font-family: "ITC Avant Garde Gothic"; is not working for some reasons.

Answer 1

First of all, there is no such thing as 0.1 pixels. A pixel is an undividable unit (except in some special cases). Some modern browsers do support sub-pixel rendering, especially for fonts, but this can lead to strange behaviour.

Second, you don't need to use a matrix transform just to enlarge the element. A simple transform: scale(1.8) will do the trick just fine and is much more readable. Even better would be just to enlarge your font-size.

Third, it's best to set line-height to em. This is a relative unit based on the elements or parents font-size. This makes sure your line-height changes proportionally to your font-size. Although using a unitless value is not wrong, and also relative, I find using em makes your code easier to read.

Fourth, usually a good HTML structure makes sure there's no need for z-index trickery. If you have to use z-index, make sure you keep the numbers low and logical. An element has z-index: 0 by default, so if one needs to be on top you just have to set it to 1. The next needs to be 2. If you need more than three of four, you really need to review your code.

Fifth, for a font to work, it needs to be loaded to the computer of the person trying to load the font. So either it needs to be installed, or it has to be downloaded. Since you cannot guarantee every visitor of your site will have a certain font installed, you need to make sure it gets downloaded. There's two ways to include a font:

• Use an online service like Google Fonts to host the files and add the relevant tag to your head like so: <link href="https://fonts.googleapis.com/css?family=Avant+Garde+Gothic" rel="stylesheet">

• Put the font files on your server and include them into your CSS:

  @font-face { font-family: "Avant Garde Gothic"; src: url(avantgardegothic.woff); }

Sixth, it's always smart to include a few fallbacks in case your font doesn't load. In most cases when a font doesn't load on Windows, it defaults to Times New Roman and destroys a website completely. So it's smart to do something like: font-family: "Avant Garde Gothic", "Open Sans", Helvetica, Calibri, sans-serif;

---

So your final CSS might look something like this:

@font-face {
    font-family: "Avant Garde Gothic";
    src: url(avantgardegothic.woff) format('woff'),
         url(avantgardegothic.woff2) format('woff2'),
         url(avantgardegothic.eot) format('embedded-opentype'),
         url(avantgardegothic.otf) format('opentype');
}

.elem{
  position: absolute;
  left: 45px;
  top: 181px;
  font-size: 7px;
  font-family: "Avant Garde Gothic", "Open Sans", Helvetica, Calibri, sans-serif;
  color: rgb(255, 255, 255);
  line-height: 2.5em;
  text-align: center;
  transform: scale(1.8);
  z-index: 1;
}