0

I know there are already topics about it, but I have not found a solution to my problem. It may be a silly question but I feel like I've checked everything: the link to my folder, the extensions, the names of the folders and files ... I can't see what is wrong in my code. thank you so much

@font-face {
    font-family:"NeutrifRegular";
    src: url("fonts/NeutrifRegular.otf") format("otf"),
           url("fonts/NeutrifRegular.ttf") format("ttf");
   }

body {
    background-color: #f1efee;
    font-family:"NeutrifRegular";
}

overview of my files : https://i.stack.imgur.com/5kTYk.jpg

https://i.stack.imgur.com/KB0pb.jpg

overview of my console : https://i.stack.imgur.com/zg1Vx.jpg

Carine
  • 35
  • 8
  • 1
    probably a path issue, try `"../fonts/NeutrifRegular.ttf"` etc. – Paulie_D Aug 14 '19 at 09:56
  • Have you tried the solution mentioned in https://stackoverflow.com/questions/38086083/to-use-local-font-in-html-using-font-face – TRIKONINFOSYSTEMS Aug 14 '19 at 10:02
  • Thank you all. Paulie_D my folder is at the same level as my css file (we see it on my previews). Roy my problem is not on mobile but on PC TRIKONINFOSYSTEMS my problem is not the same. My code seems similar to the given solution. There must be another problem that I don't see ... – Carine Aug 14 '19 at 10:12
  • Depends what browser you are trying to view it in - you don't seem to have included all font types to cover all browsers (you seem to be missing your woff versions) and if your fonts folder is on the same level as the css folder, your relative path is wrong (I cannot see your image as my firewall blocks imigur) – Pete Aug 14 '19 at 10:21
  • Pete : Thank you ! Need a woff version? I will ask for it. I do not manage the files. Why my path is wrong I don't understand? I am in my css file and I have to go to the fonts folder to recover my typography. The fonts folder is at the same level as my css file – Carine Aug 14 '19 at 10:41

1 Answers1

0

You wrote the wrong format type.

https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#src-desc

@font-face {
    font-family:"NeutrifRegular";
    src: url("fonts/NeutrifRegular.otf") format("opentype"),
           url("fonts/NeutrifRegular.ttf") format("truetype");
   }
Fabianowty
  • 66
  • 3
  • Thank you so much. I have the formats that I'm given ... I will ask for more. – Carine Aug 14 '19 at 10:42
  • You wrote `format("ttf")` and `format("otf")`, but ALL browsers don't understand this syntax. You need wrote `format("truetype")` and `format("opentype")` instead. – Fabianowty Aug 14 '19 at 10:52
  • Now it's only the format that should not be adapted to any browser because it works on Google Chromes. Thank you ! – Carine Aug 14 '19 at 12:12
  • I added the woff format and it still does not work on firefox – Carine Aug 14 '19 at 14:55