Using custom fonts in content script
# support-framework
f
Using custom fonts in content script
I'm having a hard time trying to figure out how to make a custom font to work in a content script, so I want to know if anyone has more experience with this. As far as I understand, I have two options: - Configure the extension to allow webfont imports through CDNs (ie. Google Fonts) - Package the font with the extension and load it locally I've been tinkering with both without any luck. When trying to make a web font import to work (using @import inside a CSS file, for example) it seems like the request for the font is never made. I've been tinkering a lot with the manifest configuration wondering if it was a problem with the setup, but I can't get any progress there. This is the current manifest overrides I have:
Copy code
json
  "manifest": {
    "host_permissions": [
      "https://*/*"
    ],
    "permissions": [
      "storage",
      "tabs",
      "cookies",
      "http://fonts.googleapis.com/",
      "https://fonts.googleapis.com/"
    ],
    "content_security_policy": {
      "extension_pages": "style-src 'self' fonts.cdnfonts.com fonts.googleapis.com;font-src 'self' fonts.gstatic.com fonts.cdnfonts.com;object-src 'self'"
    }
  }
And loading the fonts locally doesn't seem to work well either. Besides the fact that a single font import might be split into 20 to 30 different files, the two ways to make the local import to work (using a relative path or using the
chrome-extension://__MSG_@@extension_id__
i18n path) don't resolve properly and give wrong imports (with relative imports querying for the current URI rather than the extension since it's a content script, and the i18n path turning invalid) Has anyone been able to make a custom font import to work inside a content script?
l
Yeah, check the csui example
The font need to be loaded using the css prop of the config
You will also need to download it locally due to mv3 restrictions
2 Views