0

I cannot get my @font-face to work. It registers when I inspect element, but it only triggers the backup serif font. This is how I have it set up:

    @font-face {
    font-family: 'Wremena';
      src: url('./fonts/Wremena Light.woff') format('woff'),
           url('./fonts/Wremena Light.woff2') format('woff2'),
           url('./fonts/Wremena Light.ttf') format('truetype'),
           url('./fonts/Wremena Light.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

and how its used:

    .name {
      font-family: 'Wremena', serif;
      font-weight: lighter;
      font-size: 2em;
      line-height: 1em;
    }

The site link is here: www.koreatownmovie.com

Furious Mother
  • 11
  • 1
  • [Don't use all those formats](https://stackoverflow.com/a/37091681/740553). Start by just using woff/woff2, and then checking your browser console for errors. – Mike 'Pomax' Kamermans Jul 30 '18 at 17:17
  • The console shows a 404 error for the woff and woff2 fonts. Are you sure you're using the correct path? It says the fonts should be in: http://www.koreatownmovie.com/css/fonts/Wremena%20Light.woff. Maybe they're in http://www.koreatownmovie.com/fonts/... instead? – Victoria Ruiz Jul 30 '18 at 18:46

1 Answers1

0

Don't use all those formats. Start by just using woff/woff2. Then, remember that @font-face is you telling the CSS engine what it needs to do when it seens font-... instructions. In this case, you told it to load the font from the URL(s) you gave only when it sees font-weight: normal and font-style: normal, but then in your page CSS you use "font-weight: lighter". Since you didn't tell the CSS engine what to do when it sees that font-weight, it will not use that custom font: you didn't tell it to.

If you want it to use your font irrespective of a particular font-... property, don't add that property

@font-face {
  font-family: Wremena;
   src: url('./fonts/Wremena Light.woff') format('woff'),
        url('./fonts/Wremena Light.woff2') format('woff2');
}

Done. This font should now get used irrespective of font-style, or font-weight, etc.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • Thanks for that link, a good resource and overview on woff/woff2. I have cleaned up the css and updated, but still having the issue. Was thinking maybe the filenames couldn't have spaces and changed that as well but no luck. Is there such thing as a corrupt file? I have it linked and working locally just not working from the server. – Furious Mother Jul 30 '18 at 18:41
  • There is, but what does your dev console say? Because 404 just means you're loading a URL that doesn't exist. (remember to always match case. Some servers are case sensitive, you'll never know which are and which aren't, so already copy-paste directory and file names) – Mike 'Pomax' Kamermans Jul 30 '18 at 21:57