0

I downloaded a google font and want to use it in my project...

I added this CSS code

@font-face {
  font-family: "Work Sans";
  src: local("Work Sans"),
    url(../src/Fonts/Work_Sans/WorkSans-VariableFont_wght.ttf) format("truetype");
}

and I get the following error:

Failed to decode downloaded font: http://localhost:3000/src/Fonts/Work_Sans/static/WorkSans-Regular.ttf
localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135

Does anyone know what I'm doing wrong? Thanks in advance!

Newbie
  • 31
  • 6
  • That "sfntVersion: 1008813135" shows that you are passing HTML data instead of font data to a font parser. `sfntVersion`are the first four bytes in a font file, and `1008813134` is `0x3c21444f` in hex and `<!DO` in ASCII, so it is most probably the beginning of ` – Waruyama May 08 '23 at 08:22

1 Answers1

-1

I'm not sure how to use downloaded google fonts but you could also just import it through your HTML <Head> section of your index.html.

Here is the code you'd need to put inside the head of your index.html

link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Work+Sans:ital,wght@0,300;0,400;0,600;0,700;1,100&display=swap" rel="stylesheet">

Or you can choose your own styles and

  1. go here
  2. scroll down to where it shows you the different styles
  3. press the + button of the styles you want
  4. hit the top right button that says "view selected families"
  5. copy and paste the automatically generated code into <Head> inside of index.html

This is how you'd apply it inside of your CSS:

font-family: 'Work Sans', sans-serif;
Peter Villaroman
  • 9
  • 3
  • Thanks, I know that I can just import them through CDN but I am planning to distribute to desktop app that may not have internet connection, hence the need to have the font stored locally in the project – Newbie Aug 12 '22 at 06:01
  • @Newbie You may find your answer [here](https://stackoverflow.com/questions/30442319/failed-to-decode-downloaded-font) – Peter Villaroman Aug 12 '22 at 06:06
  • Thanks for trying, I checked out https://transfonter.org/ and was pretty hopeful but sadly I get the same error message as before – Newbie Aug 12 '22 at 06:13
  • Awe yeah sorry I couldn't be of better help. Good luck! – Peter Villaroman Aug 12 '22 at 20:20