Unusual behavior observed in Google Font when using display=swap

After attempting to integrate a Google Font API into my website by adding the following code to my HTML:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Source+Serif+Pro|Suwannaphum&display=swap" rel="stylesheet">

I encountered an issue where text using the specified font would briefly display as small before returning to its normal size.

Through trial and error, I discovered that removing the &display=swap section from the code resolved the glitch and allowed me to use the font without any issues.

I am curious as to why including &display=swap caused this glitch, especially since I directly copied the code from the Google Fonts API website.

htmlcssfontsgoogle-apigoogle-fonts

Answer №1

When you include &display=swap, it sets font-display: swap, enabling the smaller fallback font to be displayed until the main font is loaded and can replace it.

If you do not use &display=swap, you won't encounter problems with font changes, but there will be a longer delay before text using the font becomes visible on your site.

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

The implementation of jQuery within an included HTML file may not function properly

I'm looking to implement the use of includes for generic HTML elements in my project. However, I've run into an issue where including an HTML file causes jQuery to stop working. Here is a snippet of my code that illustrates the problem. Specifica ...

jqueryhtmlinclude

Having trouble showing table data in Angular

My goal is to showcase data from a table created using Spring-Boot Below is my model.ts: export class Quiz1 { QuestionId?: any; Question?: string; OptionsA?: string; OptionsB?: string; OptionsC?: string; OptionsD?: string;} He ...

htmlangulartypescriptspring-boot

The W3C validation indicates that the attribute "alt" is not permitted on the element "a" at

While using the W3C validation service, I came across this error message: Attribute alt is not allowed on element a at this point. The validator is flagging the issue after the "Four Fortune 500 Companies reside: " text. Below is the snippet of my ...

htmlw3c-validation

What is the best way to align two bootstrap buttons next to each other?

Is there a way to align buttons on a modal side by side? One button is a download link and the other a mirror link. I attempted to use a custom class with CSS property "display: inline-block;" but it did not work as expected. Any suggestions on how to achi ...

javascriptjqueryhtmlcsstwitter-bootstrap

Populate the form fields with data extracted from the uploaded CSV file

My latest project requires me to transform the uploaded CSV file from the first page into a form. This form should be pre-filled with the data from the CSV file to make editing easier. Currently, I have a working CSV upload feature. However, I need to hav ...

phphtmlmysqlformscsv

Insert a concise, condensed form of a Gist into an HTML document

Let's consider a scenario where we want to embed a lengthy gist in our webpage, like so: <script src="https://gist.github.com/benanne/3274371.js"></script> You can access the gist at this link: https://gist.github.com/benanne/3274371 Th ...

htmlgithubgist

The functionality of the bootstrap Dropdown multiple select feature is experiencing issues with the Onchange

Creating a Bootstrap Multiple Select Drop Down with dynamically retrieved options from a Database: <select size="3" name="p" id="p" class="dis_tab" multiple> <?php echo "<option>". $row['abc'] ."</option>"; //Fetching option ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Tips for creating vibrant tabs or incorporating additional outputText following tabs within primefaces

https://i.sstatic.net/vtipc.png In my tabView, I have two tabs and I am trying to add a third one that looks like the attached image. I have tried using outputText for this purpose, but it doesn't seem to work as expected. Specifically, I want part o ...

cssprimefacesxhtml

The React-bootstrap Modal encounters issues when handling image content and scaling for mobile display compatibility

Can someone please assist me with displaying the full image of a small image located in the gallery? Whenever I try to scale the display, the Modal automatically resizes but the image does not resize accordingly. The image ends up overlapping when scaling ...

cssreactjsbootstrap-4react-bootstrap

There is a slight gap between the svg element and the path

Here is the size of my path tag (g tag is same size) https://i.sstatic.net/Huk8j.png This is the size of my SVG tag https://i.sstatic.net/VBXQi.png There is a gap between them. These are the inline attributes... <svg preserveAspectRatio="none" cla ...

htmlcsssvg

Ways to stop a background image from repeating?

<div style="background-image: url('https://i.ibb.co/v1B855w/bg15.png'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name6.png" /> ...

htmlcss

Switching button presses

http://jsfiddle.net/qVfy7/ HTML <div id='button'></div> <div id="mydiv">ko</div> JS $('#button').click(function () { $('#mydiv').text('ok'); }); CSS #button{ width:100px; he ...

javascriptjqueryhtmlcss

CSS and Javascript functioning correctly within internal server, but encountering issues when accessed externally

I am in the process of creating a website for a friend. The goal is to have a flashy animated style website that functions well on IOS and allows him to make changes easily. To achieve this, I am utilizing JQuery, my own javascript, and multiple css files. ...

javascriptjquerycssinternet-explorer

What are the steps to create a dynamic background image that adjusts to various

When viewing the website on a computer screen, the entire cat is visible in the background image. However, when switching to a mobile screen size, only a portion of the cat is displayed, appearing as though it has been cut off. The image is not smaller on ...

htmlbootstrap-4responsive-designbackground-image

Using regex pattern in mobile with HTML5 input type number

Looking to create a regex pattern for an input field with type number that only allows numbers and dots. Here's what I've tried: <input type="number" pattern="[0-9.]*"> <input type="tel"> Both options are allowing only numbers (0-9 ...

ioscsshtmlnumpad

CSS: Only one out of three <div>'s has the styles applied in JSFiddle

When working on my project, I encountered an issue while trying to add CSS styles to three <div> structures with unique IDs. Strangely, making small changes to unrelated CSS caused elements to go from being stylized to losing their style. If you com ...

jquerycss

I prefer to prevent the page from refreshing once the PHP code is executed

<?php $sendTo = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45203d242835292005203d24283529206b2b29">[email protected]</a>"; //Receiver mail $name = ""; //Sender's Name $email = ""; //Sender' ...

phphtmlcontact-form

Implement a fullscreen hero image on a specific blogroll template page in Wordpress

My portfolio website uses custom page templates for each page. The blog page is not the landing page, but an interior page. I have been able to add a custom hero image to every page template except for the blog page. Currently, I am using the content.php p ...

phphtmlwordpressfullscreenblogs

Updating the checklist status using an ajax request: A step-by-step guide

Is it better to update the checklist status by making individual ajax calls for each checklist item or by making one call and updating it once completed? I have included a template showing how it currently looks and what I am aiming for. Unfortunately, I ...

javascriptjqueryhtmlcssajax

Is it necessary to only override the monospaced font?

Can the monospace font in Angular Material be customized for just the <code>foo</code> blocks? I want to use a font where the number zero 0 looks distinct from the letter oh O. ...

cssangularangular-material