Strategies for reducing the delay in font loading

After running Google Lighthouse, I was directed to an article about how to optimize font loading speed:

https://developers.google.com/web/updates/2016/02/font-display

Previously, I was loading Open Sans like this:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

The article provided a different example that I attempted to implement:

@font-face {
  font-family: 'Open Sans';
  font-display: block;
  src: local('Open Sans'), url(https://fonts.googleapis.com/css?family=Open+Sans) format('woff2');
}

However, the new method did not work as expected. Can someone point out my mistake?

UPDATE: Issue resolved. It turns out I need to retain the font-family: "Open Sans", which I mistakenly believed was no longer necessary. Apologies for any confusion caused.

csswebfonts

Answer №1

Don't overlook the importance of using quotation marks "", you can find what you need below:

@font-face {
  font-family: 'Open Sans';
  font-display: block;
  src: local('Open Sans'), url("https://fonts.googleapis.com/css?family=Open+Sans") format('woff2');
}

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

Restrictions on the number of characters based on the size of fonts in an html list sc

Recently, I attempted to implement a ticker message on my website using li scroller. However, it appears that there is a limitation on the number of characters that can be displayed in the ticker message when different font sizes are used. With a smaller ...

javascriptjqueryhtmlcsswordpress

What is the best way to display text on top of a background image?

After successfully setting a photograph as the background of my website and ensuring it fills the page without tiling, I encountered an issue with positioning the navigation bar in the center of the image. Despite specifying the image as a background ele ...

htmlcssnavigationbackground-image

Choose the radio button upon clicking away from the input field

Currently, I have a standard Bootstrap 4 accordion that contains a radio button. Here is the code snippet: <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> ...

htmlcsstwitter-bootstrap

Issue with unordered list item styling in CSS

Encountered a peculiar problem: Within my .cshtml file, there is another element: <ul> <li>Test</li> <li>Test2 <ul> <li>Test3</li> </ul> </li> <li>Tes ...

htmlcss

Transforming dynamic table text into an image: Step-by-step guide

I have a live scoreboard on my website that pulls information from another site, making the content dynamic. I want to enhance the display by replacing certain elements in the table with images, such as displaying logos instead of club names. However, my k ...

javascripthtmljquerycss

Why does CSS work on Localhost but not on the server in IE?

I recently faced a bizarre issue. After designing a website using CSS3, I uploaded it to the server only to discover that most of the features are not supported by IE8, making the site layout unrecognizable. Even more strange was the fact that IE8 display ...

htmlcssinternet-explorerinternet-explorer-8

Unlocking the hidden div puzzle in Bootstrap: A step-by-step guide

Currently, I am working on a website project that utilizes Bootstrap. On the right side of the page, there is a column containing a search module and various other elements. However, this column is hidden on smaller screens. I am looking to bring back only ...

csstwitter-bootstrapbootstrap-4visibilitydisplay

List organized in two columns utilizing the data-* attribute

Is it possible to display a list in a two-column format based on a data attribute of each item? <ul> <li data-list="general_results">general text1</li> <li data-list="general_results">general text2</li> <li dat ...

htmlcss

Resizable vertical sidebar that is permanently fixed in place

I am currently working on a bootstrap website where I have set up two main divs in the body - the sidebar and content. The content div on the right adjusts its height based on the amount of content within it, while the sidebar div on the left should remain ...

htmlcssbootstrap-4

Swapping out an ImageButton for a custom-styled icon

I am in need of replacing an ImageButton within a GridView ItemTemplate with an icon that is defined in a CSS style. My usual approach would be to replace the ImageButton with a hidden button and then use JQuery to trigger a click event on the hidden butt ...

jquerycssasp.netgridview

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

javascripthtmlcss

The div's coloring extends beyond the margins

My page is set at a width of 970px. Everything looks good, with the paragraph aligned within the margin. However, when I try to apply color, it extends outside the margin. <div class="container"> <header> <nav c ...

htmlcsstwitter-bootstrap-3margin

Issues with audio and video playback intermittently occurring on Sencha Touch 2

As a beginner with Sencha Touch 2, I am currently working on uploading images onto an iPad using Xcode. My app has audio playing on the home screen, and I want the video to start playing and the audio to stop when a specific tab is selected. However, the ...

javascripthtmlcssextjs

Updating the functionality of Bootstrap 4 accordions

Utilizing HTML templates based on Bootstrap 4.3.1, I am delivering educational content to my students. In the current setup, all accordion panels are closed when the page loads, and each panel can be opened independently of others. To see a live example, ...

javascripthtmlcssbootstrap-4bootstrap-accordion

Tips for hiding a class while scrolling up with jQuery

I have been experimenting with making classes appear and disappear based on scrolling behavior in a browser. I successfully made a class appear when reaching a certain height using the following code: jQuery(".tetapElement").css("opacity", 1); jQuery ...

javascriptjqueryhtmlcss

Placing MySQL information into a container

Currently working on a tutorial and attempting to update the styling. While I understand that the code may not be up-to-date, breaking it down into parts is aiding my comprehension of the whole. I am exploring the idea of inserting MySQL data into divs in ...

phpjqueryhtmlmysqlcss

Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using wi ...

htmlcss

Display tooltips on top of z-index stacking contexts

I am struggling to display a tooltip within a table field, on top of other fields and tables. The issue lies in the fact that the other tables and elements are housed within different DIVs that have set the CSS z-index property to 0. Even if I assign a hi ...

htmlcssz-index

Creating a responsive Google map within a div element: A step-by-step guide

I am experiencing difficulties with implementing a responsive Google map on my webpage. To achieve a mobile-first and responsive design, I am utilizing Google Map API v3 along with Bootstrap 3 CSS. My objective is to obtain user addresses either through th ...

javascripthtmlcssgoogle-maps

Words displayed on an image, perfectly aligned in the center

Check out this fiddle: http://jsfiddle.net/WdZeC/ <div class="text_align_center" style="text-align: center;"> <div style="position: relative;"> <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"> ...

htmlcss