Unable to import Google fonts locally

Describe the bug I basically downloaded the font family Inter and supposedly registered it with the following code:

Font.register({
  family: 'Inter',
  fonts: [
    { src: '../../../fonts/static/Inter-Bold.ttf', fontWeight: 700 },
    { src: '../../../fonts/static/Inter-Light.ttf', fontWeight: 300 },
    { src: '../../../fonts/static/Inter-Medium.ttf', fontWeight: 500 },
    { src: '../../../fonts/static/Inter-Regular.ttf', fontWeight: 400 },
  ],
});

However I get an Error: Unknown font format in the browser and the file won’t download at all. When I somehow manage to get past this bug all the characters show up as gibberish. I’ve already troubleshooted it in past issues and importing it as modules didn’t work as well. Also, the links from Google apparently don’t apply to the src string, since they only provide <link> tags or @import css statements only…

To Reproduce Then I call the font family in my root container for the PDF file const styles = StyleSheet.create({ container: { margin: ‘5px’, fontFamily: ‘Inter’, }, });

Expected behavior The PDF downloads with the fonts applied.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• React-pdf version: 2

[mateusmlo]

Any updates on this? I’m still unable to import fonts and have no clue how to get around this problem 😦

[diegomura]

Got fixed in the commit above. See the before and after using the FiraSans font

Before: a75847b2-8e99-4907-b892-9c9c2a3e948b.pdf

After: 0458a0c9-6dcd-46c0-b8e4-960755a5b213.pdf