Using custom @font-face in CSS is not working

Question

Custom font isn't loading on my website. Can someone help? I can't seem to get the @font-face to work and it looks right.

@font-face {
  font-family: 'AppleGaramond';
   src: url('fonts/AppleGaramond-BoldItalic.ttf') format('truetype');
   src: url('fonts/applegaramond-bolditalic-webfont.woff') format('woff'),
   src: url('fonts/applegaramond-bolditalic-webfont.woff2') format('woff2');
}

.h1, h1 {
    font-size: 3.1em;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.7em;
    font-family: 'AppleGaramond', serif;
    color: #161616;
}

@font-face { font-family: customFontsDIN; src: url(../fonts/open-sans/OpenSans-Regular.ttf); } try this — Ravi Ashara, Jan 29 '21 at 05:26
where you is your css file and /css folder in main root folder (website-2021)? — Minal Chauhan, Jan 29 '21 at 05:53
Does this answer your question? [@font-face not working](https://stackoverflow.com/questions/9897306/font-face-not-working) — Bishan, Jan 29 '21 at 05:54
my css file is in the css folder. the css folder is in the main root (website-2021) — Laura Nguyen, Jan 30 '21 at 03:12

score 1 · Answer 1 · answered Jan 30 '21 at 03:15

I got it. I just had to add (..) before the /font. Double period (..) means you go up one folder and then look for the folder behind the slash.

@font-face {
  font-family: 'AppleGaramond';
   src: url('../fonts/AppleGaramond-BoldItalic.ttf') format('truetype');
   src: url('../fonts/applegaramond-bolditalic-webfont.woff') format('woff'),
   src: url('../fonts/applegaramond-bolditalic-webfont.woff2') format('woff2');
}

Thanks guys for helping me out!

Using custom @font-face in CSS is not working

1 Answers1