0

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.

4

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;
}
  • 1
    Unitless line-height is relative to font-size – Cai May 23 '17 at 8:00
  • Also most modern browsers are fine with sub-pixel rendering ;) (or at least it is a thing.. I don't know about "fine") – Cai May 23 '17 at 8:03
  • (1) True, but I'm just not a fan of unitless because it's not instantly obvious what it represents. 1.5 what? percent? 150 percent? That's why I always use a unit, it just makes scanning my code easier. (2) Yes, but I have seen some very strange things happen when using sub-pixel values. Especially in conjunction with transforms, translates and animations. And most of the time, a pixel is fine-grained enough. – PieBie May 23 '17 at 8:07
  • 1
    Sure, I do completely agree (I use unitless line-height sometimes, but agree units are better for readability)... I was mostly just being pedantic, your edits are much better now though :) – Cai May 23 '17 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.