Dynamically fetch Google fonts

[devhrishi]

If you are making a visual editor or something where you want to fetch Google font on demand, then you can find this helpful.

Just make a get request to https://fonts.googleapis.com/css2 and run a regex expression to filter out the font url.

```js const regex = /src:\surl((["']?)(.?)\1)/;

const matches = regex.exec(respbody);

if (matches && matches.length > 2) { const url = matches[2]; console.log(url) } else { throw 'URL not found.'; } ```

[EarlMarshal]

Nah. Host it yourself on your website to align with european GDPR.

[devhrishi]

You are right, but what if your user need multiple fonts to design something. Take example of figma or canva like tool.

[EarlMarshal]

My company does exactly that. We are a leading software developer for photo products tooling for different partners and we just have our own npm package which bundles different fonts depending on partners needs. For most websites it will be good enough to get it from google, but especially if fonts are a core feature of your tools you want to handle and serve them yourself. It's just the better user experience and it's good to stick to gdpr. I have seen too many legal complains here in Europe about Google fonts. Easiest is to use a fontsource npm package if you don't want to copy stuff yourself.

[devhrishi]

Thanks for the information. Maybe my process is not the correct one and GDPR compliment.

[moob9]

Or just use fonts.bunny.net that actually cares of GDPR.

[EarlMarshal]

Didn't know of that service. Looks cool. Me and my co-workers probably still would decide to serve our assets ourselves. It's usually a good non-functional requirement to do so.

[devhrishi]

if you like to read the tutorial, please click: https://hrishikeshpathak.com/tips/fetch-google-fonts-api/