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.
I adjusted the mat-tooltip to be displayed as multiline using the following style in the global CSS: .mat-tooltip-class-here { white-space: pre-line !important; } Interestingly, this formatting works on span and button elements but not on mat cells. ...
Is it feasible to deactivate shadows and elevation on all components using a configuration setting? ...
Can someone assist me in creating responsive DIVs with images inside? Currently, the second div is appearing below the first one, and I'm struggling to make them scale based on mobile and tablet screen sizes. Here is the code snippet: .new_ba ...
When trying to retrieve a dynamic height iframe, I implement the code below. In the <head> area <script language="javascript" type="text/javascript"> function adjustIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight ...
Whenever I enter the final digit, the text-box swallows up the initial number (it vanishes), resulting in an additional space. https://i.stack.imgur.com/Vfm8s.png https://i.stack.imgur.com/od4bQ.png Upon clicking outside of the text-box, the formatting ...
Looking to enhance my Joomla site by installing a plugin that allows me to toggle the visibility of content with a click, similar to how FAQ sections work on many websites. Question 1 (click here for the answer) { Details for question 1 go here } Questi ...
I attempted to implement the Matthew James Taylor method, utilizing three columns. However, my main issue arises when I desire the middle column to dictate the height. In other words, if the center div is 500px in height, I want the right div's height ...
Creating a responsive website, I'm looking to incorporate a feature that allows for switching between a mobile version and a standard desktop version similar to what Wikipedia does. To achieve this, I would need to reload the current HTML file but en ...
There is a specific requirement I have where I must retrieve the value of the second td in an HTML table when clicking on the first column. To accomplish this task, I am utilizing jQuery. $('.tbody').on('click','tr td:nth-child(1) ...
As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...
I have implemented the material design framework vuematerial with vue.js. In traditional HTML, a selection box looks like this: <select> <option value="">You should initially see this</option> <option value="1">One</o ...
Attempting to craft a pop-up window on my own, I encountered an issue. Upon pressing the button, instead of the anticipated pop-up appearing and darkening the background below it, the entire page freezes with no sign of the pop-up box. If I eliminate the ...
I am having an issue with the background. I am aiming for something similar to what is shown in screenshot 1, but instead, I am getting the result shown in screenshot 2. Where could the problem lie? html, body, .bg-for-1 { height: 100%; } .bg-for-1 ...
Is it possible to declare multiple background positions for the same background image? I have a span with the class page_heading and I want this class to display the same image twice, once at the beginning of the text and once at the end. HTML: <h1&g ...
Looking to create a dynamic HTML5/CSS/JS Website where the first page always displays in fullscreen mode with a background image, while the subsequent pages appear in a normal layout. Here's an example of what I'm aiming for: I've created ...
I am noticing that the code below is not positioning my span to the top-left corner of the button as I expected. Can anyone explain why? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> &l ...
The demonstration at this codepen https://codepen.io/Chester/pen/QPoyjN showcases a border animation effect. While it works effectively with a white background, I am interested in making the box's background dynamic. <div class="rainbow"& ...
Encountering an issue with Safari where the background isn't scaling properly. It functions perfectly in Firefox, Chrome, and other browsers, but Safari is presenting a problem. Here's a link to the site: This issue occurs when the resolution is ...
I need help implementing a site using React that scrolls horizontally. I'm unsure how to implement certain aspects, so I am looking for some assistance. Within a wrapper, I have multiple container Divs. <div class="wrapper"> <div class=" ...
I'm looking to enhance the darkness of the material UI backdrop as its default appearance is not very dark. My goal is to make it dimmer and closer to black in color. ...