Font rendering issue in Chrome extension

I have been diligently following various tutorials on incorporating a webfont into my Chrome extension, but unfortunately, none of them seem to be working for me. Despite all my efforts, the font remains unchanged and still appears as the default ugly font.

I downloaded the desired font as a zip file () and saved Raleway-Regular.ttf under assets/fonts/

In addition, I made sure to add the font file to the list of web accessible resources:

"web_accessible_resources": [
    "assets/fonts/Raleway-Regular.ttf"
]

Within the style.css file, I included the following code at the top:

@font-face {
    font-family: 'UniqueNameFont';
    font-style: normal;
    font-weight: 700;
    src: url('chrome-extension://<id_hidden>/assets/fonts/Raleway-Regular.ttf'); 
}

* {
    font-family: 'UniqueNameFont';
    box-sizing: border-box;
}

I have double-checked the path to the file and ensured that there are no error messages in the console log.

However, despite successfully styling other elements, the font face seems unaffected by these changes within the shadow dom of my extension. Could dynamically adding content be the cause of this issue, even though other styles are applied correctly?

I also experimented with using the @import function provided by Google Fonts and observed that the file was loaded in the Networks tab, yet inexplicably, it had no impact on the actual font display.

Answer №1

It seems like the solution worked perfectly for me when utilizing the Google Web Font Loader library. The process is quite straightforward.

var googleFont = document.createElement("script");
    googleFont.src = "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js";

    var callbackFunction = function (){ 
        var scriptElement = document.createElement('script');
         scriptElement.type = 'text/javascript';
        var fontCode = "WebFont.load({google: { families: ['Open Sans', 'Open Sans:light', 'Open Sans:semi-bold', 'Open Sans:bold'] } });";
        try {
          scriptElement.appendChild(document.createTextNode(fontCode));
          shadowRoot.appendChild(scriptElement);
        } catch (error) {
          scriptElement.text = fontCode;
          shadowRoot.appendChild(scriptElement);
        }
    }
    googleFont.onload = callbackFunction;
    shadowRoot.appendChild(googleFont);

Afterward, you can easily include the font family in your stylesheet as follows:

 * {
    font-family: 'Open Sans', sans-serif;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for a MUI control to automatically close itself when clicked outside of the component?

Currently diving into the world of MUI 5 component design. Does anyone know where I can locate the code responsible for closing a component when clicking outside of it? I've searched through the source code but couldn't pinpoint it. This functi ...

Is it possible to establish the page state upon loading (in the context of a GET request

At present, my navigation bar is set up to utilize AJAX for loading new pages and window.pushState() in order to update the URL when the AJAX call is successful. I've come to realize that it's crucial to push the page state during GET requests s ...

Storing data collected from a Google form into an Excel spreadsheet

I have created a form using table layout. My goal is to automatically shift the focus to the next input field once the current one reaches its maximum length. I tried implementing this functionality with jQuery, but it only seems to work with inputs and no ...

Error in Angular: Trying to access property 'setLng' of a null component variable

Just starting out with Angular and I've come across the error message Cannot read property 'setLng' of null. Can anyone help explain why this is happening? import { Component, OnInit, Input } from '@angular/core'; @Component({ ...

What could be the reason for lxml not being able to locate this class?

Trying to extract text from a webpage using Python has always been tricky, especially with the surprises lxml tends to throw. Here's what I attempted: >>> import lxml.html >>> import urllib >>> response = urllib.urlopen(&a ...

Is there anyone who can clarify the operations happening within this Three.js StereoEffect code?

Is there anyone knowledgeable in stereo rendering who can provide an explanation of how these functions work together to achieve the VR stereo effect? Information on functions like StereoCamera(), setScissor(), setViewPort() in the three.js library seems s ...

Select2 loading screen featuring preloaded value

Trying to populate a select2 box with instrument options on an edit profile page for a musician site. The information is pulled from the database, but I'm struggling to display the existing instrument list in the select2 box upon render - it always ap ...

"Beginner's guide to utilizing JQuery and AJAX with PHP

I am struggling to grasp the concept of using AJAX and jQuery to post data without reloading the page. Specifically, I am facing issues with the form reloading the page and not updating variables. Here is the code I have been working on: Initially, I was ...

Position the division at the location of the cursor for particular usemap components

Looking for a way to position a division on top of an image using a usemap. Interested in having the div only appear when the mouse hovers over a particular area, and at the precise location of the cursor. Came across some examples using jQuery, similar ...

Showing options in the navigation bar upon user authentication with Passport in NodeJS

When a user is connected, I want the navbar to display "Profile of: {USER}", otherwise it should show a set of Sign up/Login tabs. The challenge lies in using EJS with separate "head.ejs" and "header.ejs" sections placed in a /partials folder within the / ...

Error: stripe.redirectToCheckout does not exist and cannot be executed

Can anyone help me with implementing Stripe checkout for a website? I've been struggling because the Stripe documentation is incomplete. Here's what I have so far: import React from 'react'; import { loadStripe } from '@stripe/stri ...

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

Durable Container for input and select fields

I need a solution for creating persistent placeholders in input and select boxes. For instance, <input type="text" placeholder="Enter First Name:" /> When the user focuses on the input box and enters their name, let's say "John", I want the pl ...

retrieve object from s3 using angular and open it as a pdf

I'm attempting to access a file from an s3 bucket using Angular and display it as a PDF. I have a node service set up to retrieve the object, which I then call from Angular. However, when I try to open the PDF in Angular, it appears as a blank (white) ...

Bringing in an external .js file into nuxt.config.js

Having trouble importing config.js with the project's API keys and getting undefined as a return value. //config.js var config = { fbAPI: "key" } - //nuxt.config.js const cfg = require('./config') env: { fbAPI: cfg.apiKey } Wonder ...

The reason the section's height is set to 0 is due to the absolute positioning of the div

Currently, I have a section tag with three divs inside that are positioned absolute (used for the isotope plugin). <section id="section1" class="cd-section"> // pos. static/relative has height 0px <div class="itemIso"> // pos. absolute, he ...

Send PHP data through AJAX and retrieve it on a different PHP page

I need to send a variable through an AJAX URL to another PHP page and retrieve it using: $id=$_GET['id']; Here's an example where the value is passed, for instance $id=6. <a id="pageid" href="ifsc-bank.php?id=<?=$id?>"><im ...

Divide a nested list into individual lists

I am working on a navigation menu with nested lists and I need to split the nested lists using jQuery while keeping the original headings intact. Can anyone help me achieve this? Below is the HTML code: <ul id="bigList"> <li><a href="#"& ...

Flex box causing Bootstrap5 responsive table to overflow

Need help with fixing overflow issue in a fixed-width div used as a left sidebar. The main content renders correctly except for tables with many columns, causing overflow before the scroll bar appears. How can this be resolved? Various layout attempts hav ...

How can I display an array of data with a changing name using a FlatList in React Native?

How can I render a list of array data with a dynamic name in a FlatList using React Native? Below is the list of data that I would like to display in the FlatList: const movies = [ { '4W2JJ0CLbvfLJzBUHORVaz6sAGv2': [ { name: ...