CODEWITHSUNDEEP
htmlcssfontsfont-face
Fabi0_Z
Fabi0_Z

Reputation: 195

@font-face not working 3

I'm trying to use a ttf font on a test page, I've converted it to woff and woff2 but the browser don't use the font (I've tried with Opera, Chrome, Vivaldi, Firefox and Edge). That's my code:

@font-face {
font-family: 'RM Typerighter old Regular';
src: url('/fonts/RM_Typerighter_old_Regular.woff2') format('woff2');
src: url('/fonts/RM_Typerighter_old_Regular.woff') format('woff');
src: url('/fonts/RM_Typerighter_old_Regular.ttf') format('truetype');
}

Upvotes: 0

Views: 925

Answers (2)

SeppeDek
SeppeDek

Reputation: 19

you need to place all of your font files in one src and separate them with commas as follows:

@font-face {
    font-family: "RM Typerighter old Regular";
    src: url("/fonts/RM_Typerighter_old_Regular.eot?") format("eot"),
         url("/fonts/RM_Typerighter_old_Regular.woff") format("woff"),
         url("/fonts/RM_Typerighter_old_Regular.ttf") format("truetype");
}

Upvotes: 0

Nima Hakimi
Nima Hakimi

Reputation: 1392

It's probably because you are not using relative path try this:

@font-face {
  font-family: 'RM Typerighter old Regular';
  src: url('./fonts/RM_Typerighter_old_Regular.woff2') format('woff2'),
       url('./fonts/RM_Typerighter_old_Regular.woff') format('woff'),
       url('./fonts/RM_Typerighter_old_Regular.ttf') format('truetype');
}

Upvotes: 0

Related Questions