Utilize HTML to pre-load a font and incorporate it into your CSS styling

It is common knowledge that when we include the following code in our .css file:

@font-face {
        font-family: "Akrobat-Regular";
        src: url('/assets/Akrobat-Regular.otf') format("truetype");
      }
      body {
        color: #1c1c1c;
        font-family: "Akrobat-Regular" !important;
      }

The browser will send an additional request to download the font, causing a brief period where the default font is displayed before being replaced by the new font.

I came across a method to preload the font, but I am unsure how to utilize the downloaded font without the need for an additional request. Here is a simplified syntax:

    link rel='preload' href='/assets/Akrobat-Regular.otf' as='font' type='font/otf'

    = stylesheet_link_tag 'application'

    css:
      @font-face {
        font-family: "Akrobat-Regular";
        src: url('/assets/Akrobat-Regular.otf') format("truetype");
      }
      body {
        color: #1c1c1c;
        font-family: "Akrobat-Regular" !important;
      }

Answer №1

To utilize pre-loaded fonts without the need to create a font-face declaration, follow these steps:

<link rel="preload" href="your_font_file" as="font" type="font/woff" crossorigin="anonymous">

Simply specify the font family you want to use:

font-family: "your_font";

This approach eliminates the necessity for an extra request, as the font is already loaded in the document.

Take a look at the example below:

div.rob {
  font-family: "Roboto";
  font-size: 20px;
}
<link rel="preload" href="https://yoursite.com/fonts/roboto.woff" as="font" type="font/woff" crossorigin="anonymous">

<div class="rob">
  Hello in Roboto
</div>

<div>
  Regular font
</div>

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

Need help automating clicking the download csv button with Selenium Python, but the button's class name changes when it's hovered over?

While attempting to save a csv file by clicking the download csv button on a website, I encountered an issue. It seems that the .click() action is not functioning as expected, and upon inspection, I noticed that the class-name of the button changes from &a ...

What is the best way to align paragraphs vertically within a required square-shaped div using CSS (with images for reference)?

I am trying to style a table in a specific way, but I'm facing some challenges. First, I want to make the internal div inside the table square with a percentage height. Next, I need to have two paragraphs stacked on top of each other within the same ...

Is there a way to automatically adjust the positioning of added pins on an image as I scroll through the image?

I have inserted a large image onto my HTML page and to manage its size, I am displaying it within a div that allows for scrolling like a map. Using jQuery, I have placed 3 markers on the image. The issue I am facing is that when I scroll the image, the ma ...

Update the icon using CSS style properties

I have been using liqour-tree and I need to change the arrow icon to a custom one. Unfortunately, I am not sure how to do this. Can someone please help me out? I have identified the element tag where the icon is placed. <i class="tree-arrow expanded ha ...

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...

Tips for aligning an element to the bottom of its container

Can you please make some major edits and then re-open? I am currently developing a page using Bootstrap 2.3.2, which will eventually serve as a template for Joomla 3.x. Within the header section, I have successfully positioned 6 elements as per the desi ...

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

Avoiding the sudden appearance of unstyled content in Single-File Components

I am looking to update my HTML navigation <div id="header-wrapper"> <div id="header-logo-title"> <nav> <ul id='mainNav'> <li>Home</li> </ul> </nav> ...

Fill Dropdown Menu Using Data Retrieval From Database

I am trying to figure out how to populate a drop down list (also known as a Select element) with data from a SQL Server query. The goal is to fill the list with results from Select storeName from storeinfo, which should give around 30 items that I want di ...

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

Transferring time for streaming MP3 files from server to HTML5 audio

Currently, my node.js server is set up to convert and stream mp3 files in real-time. I have integrated an HTML5 audio tag to play this stream, but I am encountering a problem - the audio element is unable to determine the duration of the mp3 until it has c ...

Images that adapt to various sizes while maintaining a consistent visual hierarchy

Hey there, I'm struggling to achieve the same row size of images as shown in the example. However, when I adjust the window size, the larger images become smaller than the columns on the left. This has been a challenge for me and I haven't found ...

Adjust image source based on media query (CSS or JavaScript)

Is there a way to update the image src based on a media query with a maximum width of 515px? I'm considering using JavaScript, jQuery, or even AngularJS if there is an event equivalent to a CSS media query that can achieve this. I want to have differ ...

Ways to retrieve data from a URL and pass it to JavaScript code

I am currently experiencing difficulties in obtaining the values from an object requested through a link on my website. The issue arises from the fact that I have created a PHP method to retrieve data from the database for the values of a particular objec ...

Adding a certain number of days to a date within an existing ng-module in AngularJS

Hey everyone, I'm new to using AngularJS and I am currently attempting to incorporate one ng-module value into another ng-module date input within AngularJS. For example: if the date is 17-08-2016 and we add 20 days, the expected result should be 03-0 ...

Showing text beside an image within a division

In my div, I have an image along with a paragraph and h6 text. My goal is to position the text on the right side of the image without it wrapping underneath. I've experimented with floating both left and right, clearing, setting display to inline-blo ...

CSS - Text and dropdown misalignment due to spacing issue

I'm looking to decrease the spacing between the text "Allow type of Compartment Option" and the dropdown box. Here is the code snippet being used: .cl-checkbox { padding-left: 20px; padding-bottom: 10px; padding-top: 20px; ...

The animation is not updating quickly enough

I'm working on a navigation bar that sticks to the top of the page. As the user scrolls down, I want the bar to shrink, and when they scroll back up, it should return to its original size. Issue: The problem I'm facing is that when the user quic ...

An easy way to enable mobility for BootstrapDialog on mobile devices

Currently, I am utilizing the library available at https://github.com/nakupanda/bootstrap3-dialog in order to create a dialog box. However, my issue arises when viewing the dialog on mobile devices where it exceeds the screen size. On desktops, adjusting t ...

I am interested in displaying or hiding a table depending on a specific condition in MVC 4

Looking at this MVC 4 Razor code snippet: <h4>You have @Model.Count() items up for sale currently. @Html.ActionLink("Add a new listing by clicking here", "Create")</h4> <br /> <table style="visibility: hidden"> .... I am seeking ...