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
– Ravi Ashara, Commented Jan 29, 2021 at 5:26
where you is your css file and /css folder in main root folder (website-2021)? — Minal Chauhan
– Minal Chauhan, Commented Jan 29, 2021 at 5:53

Laura Nguyen · Accepted Answer · 2021-01-30 03:15:56Z

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!

answered Jan 30, 2021 at 3:15

Laura Nguyen

216 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using custom @font-face in CSS is not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related