What is the process for loading fonts in advance?

On my website's index.html I've included the following code:

<link rel="preload" href="assets/fonts/Raleway-Black.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-Bold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-ExtraBold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-Medium.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-SemiBold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/raleway-v12-latin-regular.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="assets/fonts/raleway-v12-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

For my stylesheets, I have added:

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Raleway'), local('Raleway-Regular'),
         url('assets/fonts/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('assets/fonts/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('assets/fonts/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('assets/fonts/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('assets/fonts/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'RalewayMedium';
    font-style: normal;
    font-weight: 500;
    src: local('Raleway'), local('Raleway-Regular'),
            url('assets/fonts/Raleway-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'RalewayBold';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway'), local('Raleway-Regular'),
            url('assets/fonts/Raleway-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'RalewayExtraBold';
    font-style: normal;
    font-weight: 800;
    src: local('Raleway'), local('Raleway-Regular'),
            url('assets/fonts/Raleway-ExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: 'RalewayBlack';
    font-style: normal;
    font-weight: 900;
    src: local('Raleway'), local('Raleway-Regular'),
            url('assets/fonts/Raleway-Black.ttf') format('truetype');
}

When running Google's Lighthouse test,

I'm advised to preload these fonts.

Here are my questions:

1) How can I properly preload these fonts?

2) Is there a way to consolidate all these font files into one for efficiency? If so, how do I achieve this for fonts like Ralway, RalewayBold, RalewayMedium, etc.?

3) I seem to only find .ttf files, where can I locate the .woff2 formats for the same fonts?

javascripthtmlcsspagespeed

Answer №1

Forget about preloading fonts! Just utilize Google fonts and swap out every one of your link tags with this:

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" />

If you wish to incorporate various font weights, simply add a colon (:) followed by the desired font weights, like so:

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,600,700,900" />

You can even load multiple fonts (in a single link) using a pipe (|):

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:700|Raleway:400,600,700,900" />

This approach is excellent because if a user has already visited another website that used the Raleway font, their browser will have it cached, leading to faster loading times for your site. This is one of the primary reasons CDNs and similar services exist.

If you want an even wider selection of fonts, explore Google's seemingly unending collection of free fonts.

NOTE: Considering the vastness of Google Fonts (and other Google services), it's unlikely that Google will discontinue its font service anytime soon.

WARNING: Using more fonts will result in longer loading times for your site, i.e., 5 fonts take longer to load than 2 fonts.

Best of luck.

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

AddDeviceModalCtrl is not defined as a function, it is showing as undefined

I am encountering the error mentioned above, I suspect that it is due to the controller not being properly attached to the module. However, I could be mistaken. Below is the definition of the controller. (function () { 'use strict'; angular . ...

javascriptangularjsangularjs-serviceangularjs-controllerng-app

Exploring Twitch API and React to visualize and display comments on a map

I am encountering an issue with mapping comments/results from a Twitch API. I am receiving a TypeError when attempting to map, and the API results are limited to 60 records with no apparent way to extend the mapping beyond that. This is the Component resp ...

javascriptarraysreactjstwitchtwitch-api

Issue: unable to inject ngAnimate due to uncaught object error

Whenever I attempt to inject 'ngAnimate' into my app, I encounter issues with instantiation. Here is the code snippet in question: var app = angular.module('musicsa', [ 'ngCookies', 'ngResource', 'ngSanit ...

javascriptangularjsangular-uibowerng-animate

Choosing an element within a table following a different element using Selenium

On a webpage, a table displays various plain text elements (filenames) on the left side and hyperlinks to PDF files on the right: Red report Download PDF Blue report Download PDF Green report Download PDF These pages have multiple entries, and t ...

htmlselenium

Guide on utilizing loader.load() function to load a compressed file in three.js - Instructions on loading filename.json.gz

I've already compressed a file into a .gz file and stored it in S3. You can find it here: However, when I attempt to load it in Three.js using loader.load("https://oic-accounts.s3.ap-south-1.amazonaws.com/3d-try-json-files/gzip/3.json.gz", ...

javascriptjsonreactjsamazon-s3three.js

Persistent Angular Factory Variables Showing Outdated Data - Instances Stuck with Old Values

One of the challenges I faced was setting up a resource factory to build objects for accessing our API. The base part of the URL needed to be determined using an environment variable, which would include 'account/id' path segments when the admin ...

javascriptangularjs

Saturn's Rings - beginning circumstances

Currently, I am developing a simulation of the Saturn system that will enable users to manipulate variables such as increasing the mass of its largest moon, Titan, to match that of Earth. This adjustment will illustrate how other moons and rings are affect ...

javascriptthree.jsphysics

What steps can be taken to address the error message "unable to execute 'down' method on undefined"?

My goal is to create a pop-up option box for the user when they click "Buy Now" for an optional product (e.g. choosing a color). However, upon loading this JavaScript code, I encountered the following error: Uncaught TypeError: Cannot call method 'do ...

javascriptjqueryajaxmagento

What is the process for converting this HTML POST request into Python code?

I am struggling to convert this specific HTML POST request into Python - I'm trying to identify a security weakness on a test server. manager= <form action="http://127.0.0.1:8000/card/0" method="POST"> <input type="hidden" name="amount ...

pythonhtml

Form Style Components

I am currently using a form that contains material-ui components. Instead of relying on inline styles for the width property, I want to use css-in-js instead. I have previous experience with styled-components but there seems to be no form element available ...

javascriptcssreactjstypescriptstyled-components

Mastering the use of gl Scissor is essential for effectively implementing popups in your

I am attempting to implement a pop-up view on top of the current webGL view. My strategy is as follows: Whenever I need to display a popup, I create a scissorRect and begin rendering the popup scene onto it. I was hoping that the content of the previous s ...

javascriptthree.js

How can CSS and JavaScript be used to strategically position two upright images next to each other within a dynamically resizing container?

Looking for a way to display two portrait images side by side within a flexible container with 100% width? The challenge I'm facing is accommodating varying widths of the images while ensuring they are the same height. <div class="container"> ...

javascriptcssflexbox

Astro Project experiencing issues with loading SRC folder and style tags

After setting up a brand new astro repository with the following commands: npm create astro@latest npm run dev I encountered an issue where the default project template failed to display correctly on my computer. Here is how the page appeared: https://i. ...

javascripthtmlcssgoogle-chromeastrojs

Ways to stop the endless cycle of a node.js script powering a Discord bot

I've developed a Discord bot using JavaScript for node.js that can change a role's color like a rainbow. async function colorChanger (){ for (var i = 0; i < colorArray.length - 1; i++){ myRole.setColor(colorArray[i]); ...

javascriptnode.jsdiscord

Guide to Utilizing the Import Function in a Vue 3 Template

Working on a Vue 3 project, my setup includes a stuff.ts file with helpful functions that I need to utilize in my template. <script lang="ts"> import { defineComponent, onMounted } from 'vue' import { doSomething } from ' ...

javascriptvue.jsvuejs3vue-composition-api

Eliminate gaps between items when using the flex-wrap:wrap attribute

Check out my code on Plunker. Is there a way to eliminate the vertical spacing when using flex-wrap: wrap; #main { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; } <div id="main"> < ...

htmlcssflexbox

Order JSON data by arranging ArrayList using JavaScript/jQuery

In the realm of JavaScript, I am working with data retrieved through AJAX that looks something like this: data:{site: ["abc", "def", "gfr"], month: ["3", "2", "6"], value: ["10", "21", "1"]} My task is to organize this data in ascending order based on th ...

javascriptarrayssorting

Adjust font size using jQuery

Hey there! I have a small question. I want to resize all HTML elements using jQuery, but the current code allows me to increase and decrease the size infinitely. var originalSize = $('html').css('font-size'); // Reset ...

jqueryhtmlcssfont-size

Attempting to retrieve data from an HTML response using Node.js

My goal is to extract the Email ([email protected]) from the HTML response using cheerio and puppeteer modules. However, I am retrieving unnecessary information which I do not need at all. It is located within the Class p2 in td/tr. when passing tr a ...

javascripthtmlnode.jspuppeteercheerio

Tips for removing yellow box decorations

I've noticed a yellow outline appearing on many of my input boxes when I select them. How can I remove this? Css lint is reminding me that: *:focus { outline: none; } should not be used due to outlines should not be hidden unless other visual chang ...

htmlcss