Stackers.
I am currently the Front End developer for www.PinionLMS.com.
Our website is using "Lato," a Google font.
The issue we are experiencing is that when you access the site from a Windows (8.1) browser such as Chrome, Firefox, or Internet Explorer, the font fails to load and defaults to sans-serif.
However, when accessing it from a Mac browser, the font displays correctly.
Any recommendations on how to fix this?
According to the information provided in your developer tool:
The page at '' was accessed via HTTPS, but included insecure content from '': it is recommended for this content to be loaded over a secure connection (HTTPS).
Ritesh
When attempting to load a font using the http: protocol from a page that has been loaded using the https: protocol, there may be some variations in how different browsers handle the mixing of secure and unsecure content. Additionally, user settings can also impact how this situation is managed. Typically, unsecure content will not be loaded on a secure page unless specifically allowed.
To address this issue, simply modify the protocol in the link tag:
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
If you're struggling with limited information, consider looking at this helpful resource:
Troubleshooting CSS @font-face compatibility issues with IE8
It's worth checking if you have specified the correct version of Internet Explorer for support.
Is there a way to implement a loading screen for route changes in Angular 2? ...
How can I create a div block with multiple images positioned inside? I'm having trouble applying div CSS properties to the images, and also want them to be displayed in round shapes. ...
Currently, I am in the process of creating a login form and have incorporated Material UI textfields. However, I am facing an issue where the textfield's default hover and active states cannot be removed. Below is my password textfield: (https://i.st ...
Here is the code I am working with: <div> <div class="inner"></div <img src="blabla" /> </div> My goal is to make the .inner div 100% width and 100% height of its parent div, which is dependent on the dimensions of th ...
The current function is operational. Upon pressing the button, it toggles between displaying "click me" and "click me again". However, I desire the button to appear blue when showing "click me" and red when displaying "click me again". <!DOCTYPE html ...
One issue that arises when using percentage or viewport unit width and height for the <body> element is that the size of these elements will change when a mobile keyboard is invoked due to an input. I have extensively researched this problem without ...
Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...
I have a container with two rows inside. One of those rows contains several columns. My goal is to have four columns per line on mobile devices, which I achieved using "row-cols-4". However, on larger screens, I want all the columns to be on the same line, ...
I have been attempting to place the FloatingActionButton on the bottom right corner of the screen. To achieve this, I am utilizing the following library: http://www.material-ui.com/#/components/floating-action-button import React, { Component } from "reac ...
I am currently utilizing react, with Material-ui being used for the Cards. For the layout, I have implemented CSS Grid Layout for the Grid system. Presently, the structure looks like this: https://i.stack.imgur.com/0FDyY.png However, my desired outcome i ...
Currently, my text "lorum ipsum" is centered in CSS, but I want to align it to the left and add padding on the right later. Can someone explain what I've created here? #ubba { font-family: "Open Sans", sans-serif; font-size: 20px; ...
After searching for a way to enable tab selection on click within my HTML fragment representing a tabbed interface, I was unable to find a solution. I resorted to manually programming it using JavaScript, which did work, but I feel there must be a more p ...
On a regular basis, I utilize these flashcards. Recently, I have started using images as answers. However, I am facing an issue - I am unable to conceal the pictures. My preference is for the images to be hidden when the webpage loads. function myShowTe ...
Is there a way to display the div width in percentage even when the image is not loaded? The image sizes are mentioned in percentage and they load dynamically, making it impossible to fix their size. How can we ensure that the div maintains the correct wid ...
I'm currently working on enhancing the navigation of my portfolio website and I’m facing a challenge in adding additional properties to my toggle() function. This basically involves creating a filter system with four possible options, which are: ...
This is what I currently have: <tr> <td colspan="4" style="font-size:7pt; font-color:red; font-weight: bold;"> PLEASE NOTE: SPECIFY THE ARTICLE IN AS MUCH DETAIL AS POSSIBLE </td> </tr> However, the text does not a ...
Having an issue with nested divs in Chrome <div id="wrapper"> <div id="content"> </div> </div> The wrapper div acts as a bordered container, forming a box. In Safari and Firefox, the content sits inside this box consistentl ...
One of the challenges I am facing involves CSS and defining drop areas for users to interact with, allowing them to either drop a section before or after existing sections. .section:before, .section:after { content: "[insert here]"; height: 64px; ...
Can the background color of an HTML meter be customized? I noticed that by default, it has a green background. Is there a way to change this green background to a different color? I attempted using the style attribute with a red background color, but it ...
Currently in the process of creating a fundraising webpage for charity, I have chosen to display an animated rabbit making its way Around The World. My progress so far includes a non-looping gif that plays on click, with a limitation on how often it can b ...