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

question from:https://stackoverflow.com/questions/65949199/using-custom-font-face-in-css-is-not-working

Answer 1

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!