How do I change the font style?

Question

I wanted to change the all the fonts of my shop. I have found that this code helps me to change it. Where do i need to implement it? Do I need to changed other strings of code to make it work?

@font-face {
    font-family: GothamBlack;
    src: url(https://github.com/JDRF/design-system/blob/master/dist/fonts/gotham/black/gotham-black-webfont.woff); 
}

Answer 1

You must put this rule in stylesheet and use font_family for selector.

once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

for example:

Css Part:

@font-face {
    font-family: GothamBlack;
    src: url(https://github.com/JDRF/design-system/blob/master/dist/fonts/gotham/black/gotham-black-webfont.woff); 
}

body {
    font-family: GothamBlack, sans-serif;
}

if body can't use of GothamBlack, so it use sans-serif.

For more Information:

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

https://css-tricks.com/snippets/css/using-font-face/

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Answer 2

Put the font-family declaration into a body selector:

@font-face {
    font-family: GothamBlack;
    src: url(https://github.com/JDRF/design-system/blob/master/dist/fonts/gotham/black/gotham-black-webfont.woff); 
}

then

body {
  font-family: GothamBlack;
}

All the elements on your page will inherit this font-family then (unless, of course you override it later).