Unable to use google fonts in the custom UI

Hi everyone. I was getting started with the forge platform and I am facing an issue while using google font in the custom UI project.

The error is as follows:
error

According to this link, we can add external fonts in the manifest.yml, but in my case it is saying that the query parameter ? will be ignored and that I guess is making the error pop up.

Can anyone suggest how to use google fonts in the forge app? Waiting for a reply. I tried adding fonts to the external permissions section of manifest.yml but I am sure I am missing something.

This is the link tag that goes into the static index.html file:

<link
      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
      rel="stylesheet"
 />

Please guide me on how to allow the font-access in the manifest.yml file

Can you show us how what you put in the manifest for the permissions/external block?

As far as the unpkg error - see Introducing design tokens, new colour foundations and dark mode - #48 by DanielDelCore .

Here is the manifest file:

I have tried changing the URL address and even removed the query params but still, the same error is coming up. Tried the entire fonts URL also but nothing is working.

Am I the first one using Google Fonts :sweat_smile: with a forge app as I can’t find any old, archived post regarding the same

Any update regarding the workaround for this?

Hi,

Unfortunately, our documentation that you’ve found doesn’t show your use case exactly.

You are trying to add fonts using CSS, therefore you need to:

  • Add fonts.googleapis.com/css2 to styles;
  • Add the actual font location (whatever Google serves in that CSS) to fonts.

I will try that , @AlexeyKotlyarov, and inform you after that. I hope that works :heavy_check_mark:

@AlexeyKotlyarov the issue remains the same. The console says :

The source list for Content Security Policy directive 'style-src' contains a source with an invalid path: '/css2?family=Press+Start+2P&display=swap'. The query component, including the '?', will be ignored.
  • The message tells you that the query component (? and everything past it) doesn’t belong in the CSP. Please just add the URL up to and including /css2.
  • The fonts should load (or at least the CSS should, with another error about the font-face) - are you seeing any effect on your page? Any other errors?

Hi team,

Apologies for the delayed response.

It seems like Google is using a stylesheet to load the fonts and then redirects to the fonts URL. The following permissions have worked for me.

permissions:
  external:
    fonts:
      - 'https://fonts.gstatic.com/'
    styles:
      - 'https://fonts.googleapis.com/css2'

Let me know if this didn’t work.

Cheers

2 Likes