font-family: “AvantGarde”; in CSS

Question

I am working on an image in Adobe Photoshop. The CSS codes which I am getting for the same image from the Adobe Photoshop are:

CSS

  font-size: 25px;
  font-family: "AvantGarde";
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  line-height: 1.792;
  text-align: left;
 -moz-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  -webkit-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  -ms-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  position: absolute;
  left: 690.337px;
  top: 322.77px;
  z-index: 103;

I am wondering, how can I put font-family: AvantGarde in my CSS codes. For some reasons, I cant find this in my CSS.

Answer 1

Have you made sure to include a link to the font in the css using @font-face ? ie

body { /* this will apply to the whole body tag */
    font-family: AvantGarde;
    font-size: 25px; 
    font-family: "AvantGarde"; 
    color: rgb(255, 255, 255); 
    text-transform: uppercase; 
    line-height: 1.792; 
    text-align: left; 
    -moz-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0); 
    -webkit-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0); 
    -ms-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
}
@font-face {
    font-family: AvantGarde;
    src: url(AvantGarde.woff);
}

Photoshop uses the fonts installed on the system, to include other fonts in css on a website you need to link to the .woff file. https://www.w3schools.com/css/css3_fonts.asp

Hope this helps!