While struggling with the same error, I stumbled upon this page during my quest for solutions (it ranks high in Google search results). Fortunately, I managed to resolve the issue and am eager to share the solution with others facing a similar predicament.
The code snippet for the @font-face src mentioned in the original poster's question is accurate. However, the error message signifies that Chrome is unable to locate the specified font file. To address this, we need to ensure the file is accessible before attempting to load it, achieved through the web_accessible_resources property as outlined in our v3 manifest (refer to documentation here).
It's crucial to insert this property correctly within the manifest. For reference, you can examine an example of a sample manifest file here. Here's how it should be configured:
manifest.json
{
"manifest_version": 3,
...
"web_accessible_resources": [
{
"resources": ["assets/Fonts/Poppins-Light.ttf"],
"matches": ["https://*.example.com/*"]
}
]
}
Note: The matches key must adhere to specific match patterns (consult the documentation), ensuring it aligns with a complete domain name.
After updating your extension on chrome://extensions/ to reflect the manifest changes and make the file accessible, proceed to load your CSS into the webpage using various methods detailed below.
Injecting A CSS File
You have the option to inject your CSS file (containing the @font-face rule) directly into the website via your manifest file (view documentation here). Upon webpage loading, this injected file will automatically apply the styles.
manifest.json
{
"manifest_version": 3,
...
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"js": ["content_script.js"],
"css": ["path/to/your/style.css"]
}
]
}
Linking A CSS File With JavaScript
Alternatively, utilize JavaScript in your content script to load the CSS file. Create a new <link> element, configure it, and append it to the webpage's <header> section.
Important: Remember to include your CSS file in the web_accessible_resources property of your manifest when utilizing this method. This ensures the CSS file's availability to both the content script and target website.
To access/load the CSS file using JavaScript, employ the chrome.runtime.getURL() method (documentation link). Consider the following example:
content_script.js
window.onload = () => {
var newLink = document.createElement("link");
newLink.rel = "stylesheet";
newLink.type = "text/css";
newLink.href = chrome.runtime.getURL("path/to/your/style.css");
document.head.appendChild(newLink);
}
Injecting CSS With JavaScript
Incorporate CSS directly into a <style> element within the webpage's <header> using JavaScript in your content script. If any external files like a font file need loading, ensure they are accessible in the manifest under web_accessible_resources.
In the provided example, we embed the OP's @font-face rule into the webpage. Utilize the chrome.runtime.getURL() method to load the font file as demonstrated below:
content_script.js
window.onload = () => {
var newStyle = document.createElement("style");
newStyle.type = "text/css";
var poppinsFont = chrome.runtime.getURL("assets/Fonts/Poppins-Light.ttf");
newStyle.textContent = `@font-face {
font-family: 'PoppinsLight';
src: url('${poppinsFont}');
}`;
document.head.appendChild(newStyle);
}
I personally verified these approaches within my own extension to confirm their efficacy. If you continue encountering the error, verify your file paths and match patterns within the manifest file. Hopefully, this guidance proves beneficial!