Google Web Font v3

[Maya Ivanova]

Hi! What is the proper way to use Google Web Font with Manifest v3?

[Stefan Van Damme]

Hi maya,

A way is to save the font file in your Chrome extension folder and load manually the file in the CSS. So it will not download the font each time you, for example when opening your local Options page.

See this helpful post:

https://stackoverflow.com/a/19243566/1731468

Thanks,
Stefan vd

[Maya Ivanova]

Thank you, Stefan! That was one of the thing I was trying, adding to Manifest v3 'web_accessible_resources', but it doesn't seem to be working. Any other suggestions are welcome

`"web_accessible_resources": [

{
"resources": [
"static/media/*.woff"
],
"matches": [
"<all_urls>"
]
}
],`

[Deco]

Your file path will not work in this format. The character * is used as a wildcard delimiter within Chrome for detecting regex match patterns - (e.g. * HTTP is used for all URLs), you must specify the font file with a proper name.

Cheers,

Deco

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/912bb222-0b0e-4495-831b-27d239c37efen%40chromium.org.

[Stefan Van Damme]

Hi maya,

"resources"An array of strings, each containing a relative path to a given resource from the extension's root directory. Resources may contain asterisks (*) for wildcard matches. For example, "/images/*" exposes everything in the extension's images/ directory, recursively, while "*.png" exposes all PNG files.

Source: https://developer.chrome.com/docs/extensions/mv3/manifest/web_accessible_resources/#manifest-declaration

Thanks,

Stefan vd

[Maya Ivanova]

Hey! Thanks for the help. 

I have a solution. Writing it up here in case anyone needs it:

- font-face src should be using the extension's id

@font-face { font-family: 'Name'; font-style: normal; font-weight: 400; src: url('chrome-extension://ID/fonts/Name.woff') format('woff'); }

- use chrome.runtime.getURL(url) to get the full url (Given a relative path to a resource packaged with the extension, return a fully-qualified URL).

- function that attaches style with the font face using the full url

- adding to manifest.json "web_accessible_resources": [{"resources": ["/static/fonts/*.ttf"], "matches": ["<all_urls>"]}]

Thanks,

Maya

[Stefan Van Damme]

Hi maya,

You are welcome.

And thank you to share it here on the Chromium Extension community.

Thanks,
Stefan vd