Assigning a Google font to the fontFamily property does not produce any change

Trying to load a font with the help of WebFontLoader, I encountered an issue where setting an element's font using 

document.getElementById("my-button").style.fontFamily = "Font I Want"
doesn't seem to work as expected. What makes this situation even stranger is:

  1. I can manually change the font to "Font I Want" by directly applying the font-family rule to the element in the browser's dev tools.
  2. I am able to set common fonts like Arial using 
    document.getElementById("my-button").style.fontFamily = "Arial"
    via the console in dev tools, but for some reason, setting it to "Font I Want" has no effect.
  3. Interestingly, when attempting to apply a misspelled font through JavaScript, the element reverts to the default system font rather than throwing an error, whereas "Font I Want" does not get applied at all - puzzling behavior that suggests the browser recognizes the custom font but refuses to implement it.

Despite these challenges, manually setting the font using CSS works perfectly fine, confirming that the font is indeed loaded correctly.

What could be causing JavaScript to struggle with setting the style.fontFamily property dynamically after loading a font? Is there a way to resolve this issue without relying on CSS due to the dynamic nature of the font loading process from the server?

javascripthtmlcssbrowserfonts

Answer №1

To address your issue without access to network traffic data, here are some potential solutions you could try:

Utilize the active callback feature of WebFontLoader to apply the font once it has finished loading: The WebFontLoader offers an active callback function that triggers when all fonts have completed loading. You can leverage this callback to assign the font to your element. Here's a sample implementation:

WebFont.load({
      google: {
        families: ['Font I Want']
      },
      active: function() {
        document.getElementById("my-button").style.fontFamily = "Font I Want";
      }
    });

Ensure that the font name is enclosed in quotes and include a backup font: In cases where special characters in the font name might cause issues, always enclose the font name within quotes for proper processing. It's also advisable to specify a fallback font in case the preferred one isn't accessible. See example below:

document.getElementById("my-button").style.fontFamily = "'Font I Want', sans-serif";

If these steps don't resolve the problem, confirm that the font was effectively loaded using WebFontLoader. To verify this, inspect the Developer Tools and switch to the Network tab. Look for a network request related to the font file. Verify that the status of this request is 200 (OK) and that the font has been successfully downloaded.

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

AngularJs: Issue encountered while compiling an ng-switch statement

Programming <input type="text" ng-model="user.name" /> <div ng-switch on="user.name"></div> <p ng-switch-default>The winner is</p> <h1 ng-switch-when="John">{{ user.name }}</h1> Can anyone help me? I encountered ...

javascriptangularjs

Module compilation error: BrowserslistError: Invalid browser query 'dead' was not recognized

Whenever I attempt to execute "npm run build" in the command prompt, I encounter an error message stating: "Module build failed: BrowserslistError: Unknown browser query dead at Array.forEach()". I have experimented with the commonly suggested fix found o ...

javascriptreactjsnpmdeployment

Press the button after 60 seconds of inactivity in JavaScript

After a lengthy search and multiple failed attempts with different files, I am in need of the following script: If there is no interaction with a webpage for 1 minute, the script should automatically: - Click on a button. - Repeat the click every 30 secon ...

javascriptbuttonclickmouse

Having difficulty passing a PHP variable to JS for updating an SQL file through PHP call

Having some difficulties with this issue. I am trying to transfer a PHP variable to JavaScript. The JavaScript then sends the variable to a php file like domain.com/updatesql.php?userid=USERNAME. Here's my index.php file which successfully passes the ...

javascriptphpmysql

Is there a way to include @odataid in an ajax request in order to invoke a post method that assigns an owner to a group?

Seeking assistance on how to utilize ajax for adding an Owner to an O365 group. Utilizing the following endpoint: https://graph.microsoft.com/v1.0/groups/{id}/owners/$ref This is my current ajax call setup, where I am passing user information through the ...

javascriptajaxmicrosoft-graph-api

I'm having trouble getting my placeholder to display correctly in react-native-datepicker. What could be the issue?

I'm struggling with displaying a placeholder correctly in the datepicker package I'm utilizing for react native... This is how I've configured the component: The _onDateChange function: const _onDateChange = (startTime) => { pickDa ...

javascriptreactjsreact-native

What is the best way to pass on the isPending status (from useTransition) to parent components?

In my codebase, I have a standard component known as ClientButton. This component essentially wraps a Server Action using startTransition to create an event handler: 'use client'; export default function ClientButton({ onClick, buttonText, class ...

javascriptreactjstypescriptnext.js

Best practices for DOM manipulation in Angular 2 and beyond

I've come across similar questions, but none seem to address my specific query. So, what is the correct way to manipulate the DOM in Angular? Let's say I have this: HTML <button id="buy-now">BUY NOW</button> If you were using pure ...

javascriptangulartypescript

Key-based user retrieval is unavailable in Express, "findAll" can only be done through email

I've created a straightforward Express/Pug application designed for searching users in a database by "email" or by "key". In this setup, each user is assigned a unique string as their key. The structure of my user model and index model files can be se ...

javascriptnode.jspostgresqlexpresssequelize.js

What is the best way to design a personalized scrollbar for a stationary sidebar within a flexible Twitter Bootstrap design?

I recently implemented a fluid layout on my article page using Twitter Bootstrap. One of the features I added was a fixed top navigation bar that stays in place when it reaches the top of the browser window. I found a helpful tutorial on how to achieve thi ...

jquerycsstwitter-bootstrap

The element type 'ReactElement<any>' does not match a JSX element constructor function. 'undefined' cannot be assigned to type 'Element | null'

After attempting the suggested fix of deleting node_modules/ and yarn.lock, then reinstalling everything, I still cannot resolve the issue. I am currently developing a basic router that renders children based on a certain prop: import React, { Fragment } ...

javascriptreactjstypescriptcreate-react-app

Whenever there is a change in the textbox, update the label value to HTML using an array

I am working with an array of textboxes and labels that are toggled in an HTML table. The labels are initially visible, but when a row is clicked, the text boxes become visible. However, I am facing an issue where changing the value in the textbox does not ...

javascriptjquery

Is there a way to override the JSON.stringify method within the JSON class of a TypeScript project without using a custom call?

Dealing with a React Native and TypeScript app here. I keep encountering an error from Fabric every week: "JSON.stringify cannot serialize cyclic structures." The frustrating part is that the error seems to pop up randomly, without any specific scenario tr ...

javascriptjsontypescriptobjectstringify

A helpful guide on passing a component as a prop to a child class and incorporating it within the child component along with additional props

Within my parent class, I have loaded a child class component and passed another component to it as a prop. In the childclass component, I am trying to display that component. <EditRecordModal show={this.state.showEditModal} onHide={this.handle ...

javascriptreactjs

Is it possible to translate Pan/Tilt angles to XYZ coordinates in Three.js using Quaternion?

I am currently in the process of converting a legacy flash project to Three.js, and I need assistance with converting the existing pan/tilt values into 3D coordinates (x,y,z). For example, let's take a look at a hotspot: var bubble = { ...

javascript3dthree.js

Using client-side routing to handle GET requests

Encountering a similar scenario as Julian: MVC - Route with querystring I am struggling to figure out how to handle a form submission with a GET request, utilizing defined routes and values from the form. (EDIT: facing a nearly identical issue as Julian ...

javascriptjqueryasp.net-mvcasp.net-mvc-4url-routing

The troubleshooting guide for resolving issues with AngularJS data binding functionality

Exploring the world of AngularJS and encountering a minor setback with a basic example that seems to be refusing to load Angular. Within this particular example, there is a straightforward data binding test in which {{}} is utilized to display a hardcoded ...

javascriptangularjs

Incorporate an HTML document into a specific DIV identifier within my primary HTML file by leveraging JavaScript and AJAX

For a project, I need to incorporate a button that, when clicked, adds content from an external HTML file that I have created. Essentially, I am looking to insert a snippet of content without using iframes. Unfortunately, I am struggling with this task and ...

javascriptajaxdomhtml

Utilize JSON to modify the database

I have successfully implemented a code to edit records in a database, but now I am looking to enhance its functionality by adding the ability to include functions for adding or deleting records as well. Currently, my form has three separate buttons for Ad ...

javascriptjsonedit

Showing sorting arrows in column headers using Django's tables2

Recently, I began implementing django-tables2 in one of my projects. Everything is functioning correctly, except for one issue that has me stumped -> trying to display an arrow image in the column headers to indicate the current sorting direction (if ap ...

pythonhtmlcssdjango