[Help Wanted] How to a add font from google font?

[Sebastian-Nielsen]

How do I add the font-family "Ibarra Real Nova' with two different fontWeights (normal and bold) and one italic with normal fontWeight ... so basically this: https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@0,400;0,700;1,400&display=swap

Google Fonts link

I tried this (and other combinations), but nothing is working:

Font.register({
	family: 'Ibarra Real Nova',
	// src: 'https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@0,400;0,700;1,400&display=swap',
	fonts: [
		{
		family: 'Ibarra Real Nova',
		fontStyle: "italic",
		fontWeight: 400,
		fontDisplay: "swap",
		src: "url(https://fonts.gstatic.com/s/ibarrarealnova/v20/sZlsdQiA-DBIDCcaWtQzL4BZHoiDkH5CH9yb5n3ZFmKopyiubzJ7XKvS.woff2) format('woff2')",
		}
	]
});

---

The docs is not helpful as it does not disclose the format of source1, source2, etc.

Font.register({ family: 'Roboto', fonts: [
 { src: source1 }, // font-style: normal, font-weight: normal
 { src: source2, fontStyle: 'italic' },
 { src: source3, fontStyle: 'italic', fontWeight: 700 },
]});`

[carlobeltrame]

I haven't seen anyone successfully use a Google Font directly via its URL. You always have to download the font and host and bundle it yourself. See https://github.com/diegomura/react-pdf/issues/1075 and many other issues which already describe this.

[chriszrc]

@carlobeltrame I was able to down .ttf from google fonts and use them directly, but I couldn't use the woff2 files. Do we know if those are supported?

[carlobeltrame]

I have only gotten TTF fonts to work so far, even though in theory, the underlying pdfkit library claims to support WOFF2 fonts.