I'm trying to host a site on Netlify (or github pages), but for some reason when entering production, the fonts change, as well as some layout issues (See photos)
[
I'm not sure if this issue is due to CSS specificity, or if I need to declare the font-types somewhere; I've already added them to my <head> tag, and my css file has them each imported.
I've created a codepen with the code: https://codepen.io/aladin94/pen/BaowqgX (keep in mind the images and layouts will differ). Any ideas?
The font imports:
<link href="//db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus"
rel="stylesheet" type="text/css"/>
<link href="//db.onlinewebfonts.com/c/21400dc679986534519c638136d62dbf?family=Rage+Italic"
rel="stylesheet" type="text/css"/>
I guess, that your production site blocks the insecure font.
See my browser console print:
Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure font
http://db.onlinewebfonts.com/t/146c398456e6a22b45102120ae8a7679.woff
. This request has been blocked; the content must be served over HTTPS.
You can change the behaviour for the specific font or you have to find a secure font for your case.
Have you tried this link:
<link href="https://db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus" rel="stylesheet"
type="text/css" />
EDIT:
As already mentioned in the comment section, you can find the sources in your developer mode of your browser. In my case, I am using chrome.
Try to download your needed files/ sources and afterwards you can try to upload it to your server environment.
I guess, it's not really a programming question/ solution because it's more related to library handling or security setup.
Related
This is my sample site published on GitHub using GitHub pages, using Jekyll. The map you see in the site is supposed to be interactive for all the states, as shown in this fiddle, which shows how the map is supposed to work.
The main Javascript file used here is jquery.imagemapster.js
The HEAD of my code is:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
...
</head>
Or you can simply see my code present in the repository used to publish the site.
Things I've tried:
Putting all the images and the script in a folder named asset, and linking to the resources. That didn't work at all. No image was displayed.
Putting the resources in the root folder. This is what I've done. The images are displayed properly, but the script still isn't working.
To check the linking, I copied the 4k lines of code into a <script> tag pair, inside the head. That didn't work as well.
Eventually, the local building of the site using Jekyll, works perfectly. What am I doing wrong here?
jquery.imagemapster.js is loading fine, the problem is in the way you are loading the libraries:
Mixed Content: The page at 'https://mooncrater31.github.io/infer/#'
was loaded over HTTPS, but requested an insecure script
'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
This prevents your site from using JQuery in modern and popular browsers (aka: Chrome) and that is why it runs fine locally, it runs without https.
To solve it just load them with HTTPS:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I am working on HTML template and facing a new issue with Mozilla Browser. I am getting these warnings in my console
Error::
Blocked loading mixed active content
“http://site_url/assets/fonts/fontawesome-webfont.woff2?v=4.7.0”
Blocked loading mixed active content
“http://site_url/assets/fonts/icofont.ttf?v=1.0.0-beta”
Check Screen shot::
I read about Mozilla new security changes, and try to not use mixed content. Now my template didn't have any https://.... url . I included a fonts like this:
<link href="//fonts.googleapis.com/css?family=Exo:300,400,500,500i,600,600i,700,900" rel="stylesheet">
<script src='//maps.googleapis.com/maps/api/js?key=GoogleAPIKey' type="text/javascript"></script>
How to resolve these errors.
Add this code in html head tag
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
I'll caveat this with the fact that I am not a Javascript expert. Not even close.
That said, I'm using a Javascript Polyfill to allow me to use rem units for text size on a web page and maintain IE8 compatibility:
http://www.joannecorryhair.co.uk/
The script is referenced on line 24:
<!--[if lt IE 9]>
<script src="scripts/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="css/0.css" />
<link rel="stylesheet" type="text/css" href="css/600.css" />
<link rel="stylesheet" type="text/css" href="css/740.css" />
<script src="scripts/rem.js" type="text/javascript"></script>
<![endif]-->
In IE8 only (even if I put this outside of the conditional meta tags), the console throws the following error and this script doesn't work (font spacing is all messed up):
Origin http://joannecorryhair.co.uk not found in Access-Control-Allow-Origin header.
This works perfectly locally.
I suspect this is something on the server config, as this is a very popular polyfill. Any help will be much appreciated.
Thanks
This error shows up because you are attempting to load assets (images, audio or video) or data (JSON or XML) across domains. The site that is serving the data/assets needs to allow your site to use those assets by setting a CORS header.
More Info: http://www.enable-cors.org
It is indeed the CORS header as suggested in Patrick's answer, however, I'll post the details separately so they're easier for users to find.
The issue is that I am using Google Webfonts. It is Google whose CORS header is incompatible. You need to add the following to your Google Font CSS reference:
data-norem
So it will look like this:
<link data-norem href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
I found this info in the Rem Polyfill issues register here:
https://github.com/chuckcarpenter/REM-unit-polyfill/issues/51
I keep getting the following error on the debug console on chrome
[blocked] The page at https://myURL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css.
[blocked] The page at https://URL/canvas ran insecure content from http://connect.facebook.net/en_US/all.js.
[blocked] The page at https://URL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js.
these are the js scripts attached to the head
THis is a facebook app that makes GET request to my own server , This was working and Just stopped working without any change in my code ! I am not sure if Facebook is blocking my requests.
These errors happen when loading scripts and other external resources (such as images) on other domains via HTTP when the main page (which is your Facebook app, in your case) is loaded via HTTPS.
Look in the code of your app, use protocol relative URLs when calling external scripts. For example, instead of this:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
Do this:
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
Edit: Note that if protocol relative URLs are used on stylesheets, IE7 and IE8 will download it twice:
http://paulirish.com/2010/the-protocol-relative-url/
This question has nothing to do with the mixed content error. About to launch a site. When i navigate from http://example.com to https://example.com, i notice that the css/js/etc is redownloaded as i am using root relative paths: .
Using an http sniffer i see that the browser thinks https://www.example.com/_css/main.css is different than http://www.example.com/_css/main.css (its not). Thus the same exact content is downloaded twice causing the site to look slow navigating from http to https (if the user doesn't have both versions cached already).
Is there anyway to stop this? The user will almost always hit up the non-ssl version of the site first so is there a script that will wait until the http content is loaded than maybe force a https version into the users cache? Or should i just use absolute paths (https://www.example.com/_css/main.css) on ever page and on every css background image (only 2 i use sprites). Or do we just live with it? Thanks.
Using an http sniffer i see that the browser thinks https://www.mysite.com/_css/main.css is different than http://www.mysite.com/_css/main.css (its not).
It is a different resource with identical content. The browser has no way to know that they are going to have the same content.
You can redirect (with a 301) from one to the other so you don't have a non SSL version.
Is there anyway to stop this?
Not really.
The user will almost always hit up the non-ssl version of the site first so is there a script that will wait until the http content is loaded than maybe force a https version into the users cache?
No. It would be a horrible security problem if a URL could precache content for arbitrary other URLs.
Or should i just use absolute paths (https://www.mysite.com/_css/main.css) on ever page and on every css background image (only 2 i use sprites).
That would work, but lead to mixed content issues.
Or do we just live with it?
Yes.
There are a couple ways to fix this.
Use a base tag. Then use relative paths for your resources and caching will be perceived to work for http and https, though really it was just loaded on https already. Demonstration
<base href="https://example.com/" />
Redirect everything to SSL when the user hits the site the Apache way (Redirect SSL)
Redirect permanent / https://example.com/login
You can use an .htaccess RewriteRule to load the https content every time; or a redirect header specified in the http version of the html would work more slowly (extra round-trip) but otherwise just as well, I believe.
Use protocol-relative paths.
Instead of this
<link rel="stylesheet" href="http://domain.com/style.css">
<link rel="stylesheet" href="https://domain.com/style.css">
use this
<link rel="stylesheet" href="//domain.com/style.css">
then it will use the protocol of the parent page.
You can reference the files without the protocol specifier, e.g.:
<link rel="stylesheet" type="text/css" href="//mysite.com/_css/main.css" />
See this post for more details:
Can I change all my http:// links to just //?