What to do when Google Font fails to load and how to define an alternative font styling

Can anyone help me out with a solution? I am facing an issue with google fonts not working in Safari on my website. Is there a way to instruct the browser to switch to a different style when the font is not supported? Below is the CSS code I am currently using:

@import url(http://fonts.googleapis.com/css?family=Pontano+Sans); 
    h2{ 
    font-family: 'Pontano Sans', sans-serif; 
    font-size: 15px; 
    text-transform: uppercase; 
    } 

I would like to add another CSS rule similar to the one above, without it overriding the existing rule:

h2{        
font-family: Arial, Helvetica, sans-serif; 
    color: #666; 
    font-size: 12px; 
}

Answer №1

To better manage situations where fonts may not load properly, it is recommended to utilize the capabilities of a web-font loader. This allows you to define various styles based on the font load state, such as active, inactive, or loading.

For more information, you can refer to the web-font loader documentation on loading states (as well as the repository on Github).

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

Styling and theming in PrimeNG

Seeking advice on how to customize the appearance of the background for the primeNG panel component. I attempted to override the styling using the specific names in my scss file for the component, but it did not work. I also tried inline with <p-panel ...

Ways in which elements can be toggled through jquery or javascript?

There are various words listed below: word1 word2 word3 ... Every word in the list is linked to 1 to 3 examples. When a user clicks on a word, certain actions should take place. I want the examples to display when the associated word (e.g., word1) is c ...

Using a border-radius on Internet Explorer 11 reveals the background through the corners

Encountering issues with rounded borders in IE 11 (11.0.9600.18350)? Check out this minimal fiddle for more information: https://jsfiddle.net/7phqrack/2/ Here's the HTML code snippet: <div class="backgrounddiv"> <div class="outer"> ...

Moving through divisions that share a common class name using jquery

I am experimenting with a plugin that allows me to attach popups to images. My goal is to enable navigation between all popups using previous and next buttons upon clicking on a popup. Below is the element when it's displayed: <div class="imp-too ...

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Here is the code snippet from my HTML file: <tr> <td><input id="z1" type="number" oninput="calculateSubTotal()"> </td> <td>Shirts - WASH - Qty 1 to 4</td> <td>2.50 ea</td> ...

Apply a unique design to a class by clicking on a button

There are 3 identical boxes with the same classes and a button: function changeColorAndAddPadding() { /* ??? */ } .box { border: 1px solid; display: inline; } <button onclick="changeColorAndAddPadding();">Click Here</button> <d ...

CSS drop down menu malfunctioning

Trying my hand at anchor tags and drop down menu. I'm encountering an issue in the code below - the dropdown doesn't seem to be working as intended. It should display the text "This is dropdown menu" directly beneath the text "This is text. Its i ...

changing background color smoothly in a short time without using JQuery

Check out this link for some code .back { margin: 20px; padding: 100px; background: yellow; font-size: 30px; } <div class="back"> Fun place to stay. We got a golf cart to see the rest of the island, but the ...

Challenges with CSS div styling (border and image issues)

I won't bore you with the details, but I'm trying to overlay image links on top of a background image in specific positions. Despite my best efforts, the images are not changing no matter how much I tweak their parameters. Here is the HTML code: ...

Tips for positioning buttons in a row below dynamic text using Bootstrap 3

Is there a way to align buttons under a variable piece of text in Bootstrap 3? Currently, when the code example is viewed in full screen, the three buttons do not align horizontally. Current Behavior: https://i.sstatic.net/lEQ7o.png My goal is to have t ...

Formatting a pair of elements side by side in MUI Select

Currently, I am tackling the challenge of organizing elements in MUI Select v4. My goal is to display these elements in two columns rather than just one column within the dropdown. Despite attempting to override certain styles within MUI, I have not been ...

Finding the Solution: Unraveling an Image String with Python

I need help decoding an image string. For example, I have a string that represents the Google logo. How can I determine the encoding used and decode it correctly? Example of google logo : (Here you will find instructions on styling properties followed by ...

What is the best way to create more room for my button arrangement?

--How can I adjust the spacing of the buttons?--The animations are working, but I need to create some padding between them-- I want all buttons to stay on the same line but with a little more space between each one--I'm still relatively new to this, s ...

Unable to conceal adjacent radio buttons

My challenge is to use only HTML and CSS, without JavaScript, to show the first radio button with its label initially. When a user clicks on it, the second radio button and label should appear while the first disappears, and so on. I am struggling to ach ...

Implementing a delay in a CSS menu design while still ensuring compatibility with browsers that do not support JavaScript

I currently have a three-tiered menu that relies on :hover and is controlled by css alone. I am now looking to introduce a slight delay to the hovers, which means transitioning my css :hovers to a .hover class and incorporating jQuery. My concern is whet ...

organize divs in a nested angular style

Looking to showcase div elements in a specific layout within my Angular project: https://i.sstatic.net/RH0lF.png The current HTML structure is as follows: <div class="outer-wrapper"> <div class="image" ng-repeat="image in images" ng-if="sho ...

Is there a way for me to have a background image behave like an img element with img-fluid class as shown in the

Showing 2 rows The issue lies with the first row, as it is not displaying properly and does not resize responsively like the second row. I have tried everything but nothing seems to work. I am attempting to do this because the text and elements in the ...

Trouble centering a list within a parent div using CSS

Even though this issue seems straightforward and many others have asked similar questions on the site, I find myself stuck after reading through several solutions and attempting various fixes. Why is this happening? My problem involves centering a navigat ...

What is the best way to align a container in the middle of the page without positioning the text in the center

Query 1: What is the best way to horizontally center the container div while keeping Typography aligned to the left? Expected outcome: https://i.stack.imgur.com/yKCZF.jpg Query 2: How can a component be positioned below the AppBar without relying on mar ...

Defining the style class for a nested Angular 2 component

Located inside my.component.html <nested-component [class]="nestedClass"></nested-component> Now, when wanting to utilize my component, both style classes need to be specified: <my-component class="my-component-style" nestedClass="nested- ...