What is the method for asynchronistically loading Material ui fonts?

When using Material-UI, the fonts block the rendering of the first page. If no fonts are loaded, Material-UI defaults to using the Helvetica font until Roboto is downloaded.

/signup (localhost)
    …media/roboto-latin-500.4b218fc7.woff2 (localhost) - 763.7ms, 14.5KB
    …media/roboto-latin-400.a2647ffe.woff2 (localhost) - 769.5ms, 14.5KB

Is there a way to asynchronously import fonts instead of using:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

or

import 'typeface-roboto'

I attempted to use the 'media' attribute and @font-face observer method:

<link rel="stylesheet" href="fonts.css" media="bogus"/>

but it did not work. I also tried using a font loader plugin from fontfaceobserver.com

I am currently using version 1.0.0-beta.3 of Material-UI.

cssreactjsfontsmaterial-ui

Answer №1

The webfontloader library offers a solution to delay the initialization of your application until fonts have been fully downloaded. This feature is advantageous as it helps prevent FOUT (Flash of Unstyled Text), which occurs when a page renders with default fonts before the desired web font is available.

Below is an illustration of how to utilize webfontloader to postpone the start of your application:

import React from 'react';
import { render } from 'react-dom';
import WebFont from 'webfontloader';

// function that mounts the application
const app = () => {
    render(
        <div>Instead of this div, render your initial component/routes here</div>,
        document.querySelector('#main'),
    );
};

// delaying app initiation until fonts are active
const webFontConfig = {
    google: {
        families: ['Roboto'],
    },
    custom: {
        families: ['FontAwesome'],
        urls: [
            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
            'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
            'https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css',
        ],
    },
    classes: false,
    timeout: 1000,
    active: app, // executed when fonts are active
};

// entry point for the application
WebFont.load(webFontConfig);

Within the web font configuration, the active attribute is assigned a function that will run once the fonts have finished downloading and are ready for use. While this may result in slower loading times during the first use of your application, subsequent visits should benefit from caching and load much quicker.

Answer №2

If you're looking for a way to load a <link/> asynchronously without resorting to excessive hacking, I suggest checking out this resource: https://codepen.io/tigt/post/async-css-without-javascript

This method offers a non-blocking solution for loading link elements, with the caveat that conditional statements may be necessary for handling different browser behaviors:

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> 
  <![endif]-->
</head>
<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

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

What is the most effective way to retrieve a specific type of sibling property in TypeScript?

Consider the code snippet below: const useExample = (options: { Component: React.ComponentType props: React.ComponentProps<typeof options.Component> }) => { return } const Foo = (props: {bar: string; baz: number}) => <></& ...

reactjstypescript

How can I address the issue of having multiple console logs within the

I am facing an issue where my code is logging to the console 3 times upon page load and incrementing its index. I cannot figure out why this is happening despite attempting to make adjustments within a useEffect. My project involves using the typewriter-ef ...

javascriptreactjsnext.js

Tips for modifying the background color of all elements ahead of the element I have selected within a grid

https://i.stack.imgur.com/cW4Lp.png I'm trying to achieve a functionality where clicking on the 20th numbered block changes everything before it to light orange. I have a sandbox code snippet attached and would appreciate any guidance on what needs t ...

javascriptreactjsmaterial-uimui-x-data-grid

Variation in values across various functions within a state

Currently, I am working on a project using nextjs. I have a custom select component that opens the options when clicked, but I am struggling to figure out how to close it when clicking anywhere else on the screen. The state value seems to be causing some i ...

reactjsnext.jsreact-hooks

Tips for adjusting the width of a table

add your image description hereImagine a scenario where there is a table featuring two columns. <table> <tr><td>Email</td> <td></td></tr> <tr><td>Full name</td> <td></td></tr> ...

htmlcss

Creating an unordered list of API movies in React, Axios, and MovieDB with a specified quantity of x

I am developing a movie search application using React, Axios, and the MovieDB API. The app currently retrieves all the desired information when searching for a movie. However, I encountered an issue where movies that share a title with more popular ones d ...

reactjsapi

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

htmlcssbordercss-tables

Issue with Angular: RouterLinkActive fails to work properly with formControlName

I am currently working on a vertical navigation bar that allows the user to navigate to different components. However, I am facing an issue where when I click on a list item, it's supposed to be active but I have to click on it to navigate to the comp ...

htmlcssangulartypescript

Tips for integrating JavaScript code into React JS applications

I am attempting to create a scrollable table that scrolls both horizontally and vertically, using the example provided by . In my project directory under src/components/ScrollExample.js, I have copied and pasted the HTML code. In addition, in src/styles/c ...

javascriptcssreactjsscroll

Font Awesome icons displayed using the <i class="icon-ok"></i> markup are not styled correctly and do not respond to events in Chrome

I implemented Font-Awesome, an iconic font designed for use with Twitter Bootstrap. Here is the markup: <i class="icon-remove reset-preference-button"></i> And here is the CSS: .reset-preference-button { cursor: pointer; } For JavaScript f ...

jquerycsstwitter-bootstrapfont-awesomejquery-events

Eliminable Chips feature in the Material UI Multiple Select component

The Material UI documentation showcases a multiple select example where the selected options are displayed using the Chip component and the renderValue prop on the Select. By default, clicking on the current value opens the list of available options. I am ...

javascriptreactjsformsevent-handlingmaterial-ui

Tips For Making Your Bootstrap 4 Page Fit Perfectly on Mobile Screens

Currently in the process of developing . The frontpage has been created and tested using Chrome's dev console's device toolbar. Ensured that the correct viewport is set and utilized Bootstrap's column system for stacking elements. However, ...

htmlcssmobilebootstrap-4

What is the best way to implement ES2023 functionalities in TypeScript?

I'm facing an issue while trying to utilize the ES2023 toReversed() method in TypeScript within my Next.js project. When building, I encounter the following error: Type error: Property 'toReversed' does not exist on type 'Job[]'. ...

javascriptreactjstypescriptnext.js

What is the best way to utilize React JS for mapping?

How do we navigate through nested objects in ReactJS? { "Data1":{ "attribute1":{ "key":"discount", "value":"50% off" }, "attribute2":{ &qu ...

jsonreactjsmapping

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

javascriptcssjquery

How to get the initial item from an API using JavaScript mapping

When mapping my arrays, I usually use the following code: moviesList.map(movie => <MovieCard movieID={movie} key={movie} However, there are instances where my API returns multiple results. Is there a way to modify my .map function to display only t ...

javascriptreactjs

"Enhance the visual appeal of your Vue.js application by incorporating a stylish background image

Currently, I am utilizing Vue.js in a component where I need to set a background-image and wrap all content within it. My progress so far is outlined below: <script> export default { name: "AppHero", data(){ return{ image: { bac ...

javascripthtmlcssvue.js

What could be causing the absolute positioned element to not follow the positioning rules as expected?

Currently, I am following a guide on creating a website using Dreamweaver (). However, I have encountered a step in the tutorial that I am struggling to comprehend. The issue lies with an element named #navlink, which is absolutely positioned in the DOM s ...

htmlcsscss-position

Transforming the appearance of web elements using jQuery (graphic)

While there are numerous resources on changing CSS with jQuery, I seem to be having trouble getting my image to hide initially and show up when a menu tab is clicked. Any help would be greatly appreciated! ;) h1 { text-align: center; } .Menu { widt ...

jquerycssimage

When incorporating <com.google.android.material.textfield.TextInputEditText> into my Android Studio preview, the screen suddenly becomes blank

When it comes to developing Android apps, my personal preference is the com.google.android.material.textfield.TextInputEditText view over the plain EditText. I find it to be much more visually appealing in every way possible. However, there is a downside ...

androidandroid-studiomaterial-uimaterial-design