Mobile app version of vmapp.org
Login or Join
Martha945

: Font-family: "ITC Avant Garde Gothic" not working in CSS 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

@Martha945

Posted in: #Css #Fonts

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.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Martha945

1 Comments

Sorted by latest first Latest Oldest Best

 

@Sent7350415

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;
}

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme