Blocked loading mixed active content “http://materializecss.com/fonts/roboto/Roboto-Bold.woff2”
I see mixed content warnings for font downloads in firefox when I try to use a website built on materialize css. My concern is not the warning but, where is the font being requested to be downloaded in the code, i.e.
I do not see any files or refrences containing the links to the Materialize website in the files I have included in my HTML. So, just curious on how is it reaching out to that URL to download them.
EDIT: Here's the snippet from materialize.css
#font-face {
font-family: "Roboto";
src: local(Roboto Thin), url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../fonts/roboto/Roboto-Thin.woff") format("woff");
font-weight: 100;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Light), url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff");
font-weight: 300;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff");
font-weight: 400;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Medium), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff");
font-weight: 500;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Bold), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff");
font-weight: 700;
}
request is sent from CSS. Search for '#font-face' in your CSS.
Related
Is it possible to create a fontface with several fonts in it, in such a way that:
font-weight: normal resolves to Roboto-Regular.ttf
font-weight: lighter -> Roboto-Thin.ttf
font-weight: bold -> Roboto-Black.ttf
font-weight: bolder -> Roboto-Bold.ttf
At the moment I'm defining a #fontface for each.
You can do it all in one statement just be aware the more font variations you add it will add size to the font library so be selective :)
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap" rel="stylesheet">
or as an import in css you can do...
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap");
and per your comment for sourcing fonts locally I don't know a way to do it in a concise manner...but the following might work
#font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Regular.eot"); src: url("/fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/Roboto-Regular.woff2") format("woff2"), url("/fonts/Roboto-Regular.woff") format("woff"), url("/fonts/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; }
#font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Bold.eot"); src: url("/fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Roboto-Bold.woff2") format("woff2"), url("/fonts/Roboto-Bold.woff") format("woff"), url("/fonts/Roboto-Bold.ttf") format("truetype"); font-weight: 500; font-style: bold; }
I am running the Joints-WP-CSS version 6 theme which uses Foundation.
I have #font-face’d the following fonts in my style.css file like below. However, I am the only person who can see the proper fonts (here is a screenshot: http://erinstruble.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-09-at-13.16.36.png). Other people are getting the fallbacks. Someone at Go-Daddy said they saw this error “DevTools failed to parse SourceMap: http://erinstruble.com/wp-content/themes/JointsWP-CSS-master/assets/styles/style.css.map”. How can I get these fonts to work properly for others?
#font-face {
font-family: "StudioFeixenSans-Book" !important;
src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.eot")!important;
src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.eot") format("embedded-opentype"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.woff2") format("woff2"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.woff") format("woff"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.ttf") format("truetype")!important;
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "StudioFeixenSerif-Regular"!important;
src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.eot")!important;
src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.eot") format("embedded-opentype"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.woff2") format("woff2"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.woff") format("woff"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.ttf") format("truetype")!important;
font-weight: normal;
font-style: normal;
}
I have the following at the very tippy top of my master CSS file for my site
#charset "UTF-8";
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratRegular.woff2") format("woff2"), url("../../fonts/montserratRegular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratRegularItalic.woff2") format("woff2"), url("../../fonts/montserratRegularItalic.woff") format("woff");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratBold.woff2") format("woff2"), url("../../fonts/montserratBold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratMedium.woff2") format("woff2"), url("../../fonts/montserratMedium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratMediumItalic.woff2") format("woff2"), url("../../fonts/montserratMediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratLight.woff2") format("woff2"), url("../../fonts/montserratLight.woff") format("woff");
font-weight: 300;
font-style: normal;
}
/*!
* Font Awesome Free 5.6.1 by #fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
#font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
src: url("../../fonts/fa-solid-900.eot");
src: url("../../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fonts/fa-solid-900.woff2") format("woff2"), url("../../fonts/fa-solid-900.woff") format("woff"), url("../../fonts/fa-solid-900.ttf") format("truetype"), url("../../fonts/fa-solid-900.svg#fontawesome") format("svg");
}
.fa,
.fas {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
/*!
* Font Awesome Free 5.6.1 by #fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
#font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: normal;
src: url("../../fonts/fa-brands-400.eot");
src: url("../../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../fonts/fa-brands-400.woff2") format("woff2"), url("../../fonts/fa-brands-400.woff") format("woff"), url("../../fonts/fa-brands-400.ttf") format("truetype"), url("../../fonts/fa-brands-400.svg#fontawesome") format("svg");
}
.fab {
font-family: "Font Awesome 5 Brands";
}
But only some of the font files are loading and I don't quite understand why. The montserratRegular, montserratBold, montserratLight, and fa-solid-900 are the only ones that load. If I remove the #font-face definitions for the Font Awesome fonts, then additionally the montserratRegularItalic font will load.
If I remove all font definitions, and only add one of them, that single #font-face will load. With the exception of the Font Awesome Brands, that #font-face never seems to load even if it's the only definition in the file.
I've double checked the files exist on the server, and there's no 404 or other errors/warnings in the console. It just seems like the browser just refuses to load them.
I've only tested this behavior deeply in Chrome, so I'm not sure if this is just a Chrome thing, although I did open the page once in Safari and saw similar behavior.
Welp, this makes sense. The other fonts weren't loading because nothing on the page was using them. And of course they did load when they were the only font available for the font-family I was using. And in the case of the FontAwesome Brands not loading, it was staring me right in the face, I was using the wrong classes.
I had
<i class="fa fa-facebook"></i>
Instead of
<i class="fab fa-facebook"></i>
I'm experiencing some major differences in font rendering (Google Font) on Win7 in Google Chrome browser. When Google Font is called via #import into LESS file, render is OK, but when I copy paste the same content of the file that is imported, I get distorted font.
Any ideas, why this is happening? I need to avoid #import due the Google PageSpeed optimization guidelines.
When Google Font is called via #import into LESS file, render is OK: http://cl.ly/Wtqb/o
Code is the following:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300&subset=latin,latin-ext);
But, when Google Font is called directly into LESS file, render gets distorted: http://cl.ly/WuOp/o
Code is the following:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzOY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
I have a few weird issues I need to solve.
First, let me show my #font-face declarations in my CSS file.
#font-face {
font-family: "Conv_Gotham-Book";
src: url("fonts/Gotham-Book.eot");
src: local("☺"),
url("fonts/Gotham-Book.woff") format("woff"),
url("fonts/Gotham-Book.ttf") format("truetype"),
url("fonts/Gotham-Book.svg#Gotham-Book") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Light";
src: url("fonts/Gotham-Light.eot");
src: local("☺"),
url("fonts/Gotham-Light.woff") format("woff"),
url("fonts/Gotham-Light.ttf") format("truetype"),
url("fonts/Gotham-Light.svg#Gotham-Light") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Medium";
src: url("fonts/Gotham-Medium.eot");
src: local("☺"),
url("fonts/Gotham-Medium.woff") format("woff"),
url("fonts/Gotham-Medium.ttf") format("truetype"),
url("fonts/Gotham-Medium.svg#Gotham-Medium") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Bold";
src: url("fonts/Gotham-Bold.eot") format("eot");
src: local("☺"),
url("fonts/Gotham-Bold.woff") format("woff"),
url("fonts/Gotham-Bold.ttf") format("truetype"),
url("fonts/Gotham-Bold.svg#GothamBold") format("svg");
font-weight: normal;
font-style: normal;
}
Problems: Hyperlinks using any of those custom fonts don't work in only one browser/platform combination Firefox 13.0.1/Mac (Example here: http://lonely-dev.com/leapfrogbeta/?page_id=896 on the headlines, )
Second Problem: Font disappears on iPad2/Safari browser.
Everything else is fine, would love some insight.
You have declared to use a font called "Journal" in your css for .custom .headline_area h2 a in custom.css while in the above code example you're calling for the Gotham Family (which, btw, has no web license at the moment). Journal is loaded correctly in both Firefox/Mac and iPad/Safari. Links work in both.
Update: the font loads fine in all mentioned cases but the links aren't working. This is because of a being an inline element. Also, declaring a height for the heading a is a bad idea. Just use this rule:
.custom .headline_area h2 a {
display: block;
}
and the links will work.
Another thing is that you should declare the heading font on the h1, h2 etc. and not just on their contained links.