How can I change this font?

Question

i have this template to edit and i want to change the font here's what i have

@import url(font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);

i want to use this font: https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display

then i have like five places in the css code where the it shows

  font-family: FontAwesome;

what i did was i downloaded the PlayfairDisplay and pasted in the "font" folder, then i changed all the "font-family:" to the name of the new font, but that did not change anything.. am i missing something?

Answer 1

If you want to use font files instead of the google import, you will have to use @font-face in css and point it to the font file. For example:

@font-face {
font-family: your font name;
src: url(sansation_light.woff);//add your font file here
}

div {
font-family: myFirstFont;
}

you can refer to the following example from w3 schools for more examples: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp