I'm getting a "mixed content" error on my website due to one font being loaded over HTTP.
My font is included in a css file like this:
#font-face {
font-family: 'fontXYZ';
src: url('../font/fontXYZ.eot');
src: url('../font/fontXYZ.eot#iefix') format('embedded-opentype'),
url('../font/fontXYZ.woff2') format('woff2'),
url('../font/fontXYZ.woff') format('woff'),
url('../font/fontXYZ.ttf') format('truetype'),
url('../font/fontXYZ.svg#fontXYZ') format('svg');
font-weight: normal;
font-style: normal;
}
With webpack I bundle this css with other various css in one file.
On my website the css looks like this:
#font-face {
font-family: 'fontXYZ';
src: url(fontXYZ.eot);
src: url(fontXYZ.eot#iefix) format('embedded-opentype'),
url(fontXYZ.woff2) format('woff2'),
url(fontXYZ.woff) format('woff'),
url(fontXYZ.ttf) format('truetype'),
url(fontXYZ.svg#fontXYZ) format('svg');
font-weight: normal;
font-style: normal;
}
All solutions that I found suggest that I change the URL to HTTPS or that I use '//' but I don't see how I could do that.
include font like this...
#font-face {src: url(font/Roboto-Bold.ttf);font-family: RobotoBold;}
font/Roboto-Bold.ttf - font file inside fonts folder(path of the file)
use font family like below..
.banner_header{font-family: RobotoBold;}
Related
I'm currently using a custom font on my website. The font looks fine on desktop, however on mobile it looks completely different. I'm also using all the right formats. Here is the code and pictures below:
Also When I remove the font family, it turns into a serif font which means a font is in fact loading, but why it looks completely different I'm not sure.
#font-face {
font-family: 'futura';
src: url('./futura.eot');
src: url('./futura.eot?') format('embedded-opentype'),
url('./futura.woff2') format('woff2'),
url('./futura.woff') format('woff'),
url('./futura.ttf') format('truetype'),
url('./futura.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Solution: I just had to change the font-weight from normal to bold.
i had same problem, i remove font type and just keep ttf,i use media query for limit this change for mobile
#font-face {
font-family: 'futura';
src: url('./futura.ttf');
}
#media(min-width:768px){
#font-face {
font-family: 'futura';
src: url('./futura.eot');
src: url('./futura.eot?') format('embedded-opentype'),
url('./futura.woff2') format('woff2'),
url('./futura.woff') format('woff'),
url('./futura.ttf') format('truetype'),
url('./futura.svg') format('svg');
font-weight: normal;
font-style: normal;
}
}
if this wont work. add this line on top of your css
#font-face {
font-family: 'futura';
src: url('./futura.ttf');
}
I have some icon fonts being used from https://icomoon.io/app/#/select
When I use the generated CSS it works fine from style tags on the actual HTML page:
<style>
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hsw0h3');
src: url('fonts/icomoon.eot?hsw0h3#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hsw0h3') format('truetype'),
url('fonts/icomoon.woff?hsw0h3') format('woff'),
url('fonts/icomoon.svg?hsw0h3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
When I put the CSS in my CSS file and adjust the paths:
#font-face {
font-family: 'icomoon';
font-style: normal;
font-weight: normal;
src: url('../fonts/icomoon.eot?hsw0h3#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?hsw0h3') format('truetype'), url('../fonts/icomoon.woff?hsw0h3') format('woff'), url('../fonts/icomoon.svg?hsw0h3#icomoon') format('svg');
src: url('../fonts/icomoon.eot?hsw0h3');
}
I am getting this error in the developer console:
Failed to decode downloaded font: file:///C:/Users/Daisy/Desktop/softstack%20consulting/fonts/icomoon.eot?hsw0h3
OTS parsing error: invalid version tag
I dont understand why it fails to decode the font just by moving the CSS and changing it's path. What am I doing wrong and how do I fix it?
You're overriding the src with this line:
src: url('../fonts/icomoon.eot?hsw0h3');
Look more closely at the original CSS. Those different formats separated with comma should be part of the second src value, not the first one.
I have following fonts in my style.css in my wordpress theme.
#font-face {
font-family: 'latoregular';
src: url('./fonts/lato-regular.eot');
src: url('./fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/lato-regular.woff2') format('woff2'),
url('./fonts/lato-regular.woff') format('woff'),
url('./fonts/lato-regular.ttf') format('truetype'),
url('./fonts/lato-regular.svg#latoregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'bebasregular';
src: url('./fonts/bebas___-webfont.eot');
src: url('./fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/bebas___-webfont.woff2') format('woff2'),
url('./fonts/bebas___-webfont.woff') format('woff'),
url('./fonts/bebas___-webfont.ttf') format('truetype'),
url('./fonts/bebas___-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'coustardregular';
src: url('./fonts/coustard-regular.eot');
src: url('./fonts/coustard-regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/coustard-regular.woff2') format('woff2'),
url('./fonts/coustard-regular.woff') format('woff'),
url('./fonts/coustard-regular.ttf') format('truetype'),
url('./fonts/coustard-regular.svg#coustardregular') format('svg');
font-weight: normal;
font-style: normal;
}
This is the text in h2 element
The h2 element has font-family of coustardregular and font-weight of bold. As you can see in the image the structure of letter T is very strange and so is with letter I. I got this problem only in chrome and nowhere else. I tried this link also but it does not work and I have no idea about it. Can anybody guide me over this.
Where are you getting your font files from? I normally try to stick to using Google fonts rather than using loads of files because you know they'll work as they've been tried and tested whereas a lot of the time when you use the individual files, they've been converted from another file type which is where a lot of problems come from.
Google Fonts has the Coustard font and you can use it simply by adding the following to your css file (at the top):
#import url(https://fonts.googleapis.com/css?family=Coustard);
...or head over to Google to customize - https://www.google.com/fonts/specimen/Coustard
#font-face {
font-family: 'exoregular';
src: url('exo-regular-webfont.eot');
src: url('exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('exo-regular-webfont.woff2') format('woff2'),
url('exo-regular-webfont.woff') format('woff'),
url('exo-regular-webfont.ttf') format('truetype'),
url('exo-regular-webfont.svg#exoregular') format('svg');
font-weight: normal;
font-style: normal;
}
I've added a font to my website, however it doesn't not show up in firefox, does anyone know why this is the case?
My CSS is above and my fonts are inside my CSS styles folder.
Any help would be appreciated!
You could try using Browser Specific css using this code for Firefox, http://browserhacks.com/ is good source for browser specific CSS hacks or you can just do a Google search for Browser Specific CSS.
#-moz-document url-prefix() {
#font-face {
font-family: 'exoregular';
src: url('exo-regular-webfont.eot');
src: url('exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('exo-regular-webfont.woff2') format('woff2'),
url('exo-regular-webfont.woff') format('woff'),
url('exo-regular-webfont.ttf') format('truetype'),
url('exo-regular-webfont.svg#exoregular') format('svg');
font-weight: normal;
font-style: normal;
}
}
Hope this helps!
I coded a website on my mac, and i used a custom font. I defined the custom font with this font-face rule:
#font-face
{
font-family: gnuolane;
src: url('../fonts/gnuolane.otf'),
}
The problem is that the font is not loaded on any windows version of any browser. On my mac, on Safari/Chrome/FF is working perfect.
This is the website.
And this is how it is supposed to look like, when font-face is working correctly:
Thanks
LE:
I generated this code and all those files from fontsquirrel.com. Still not working. I tried with both '../fonts/gnuolane....' and '/fonts/gnuolane....'
#font-face {
font-family: 'gnuolane';
src: url('../fonts/gnuolane_rg-webfont.eot');
src: url('../fonts/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/gnuolane_rg-webfont.woff') format('woff'),
url('../fonts/gnuolane_rg-webfont.ttf') format('truetype'),
url('../fonts/gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still not working tho'..
Move all your font files (the actual fonts I mean) to the same folder as your CSS file...
Then use this block of CSS. Tell me if it works. I sense it's a path issue...
#font-face {
font-family: 'gnuolane';
src: url('gnuolane_rg-webfont.eot');
src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('gnuolane_rg-webfont.woff') format('woff'),
url('gnuolane_rg-webfont.ttf') format('truetype'),
url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
try this
#font-face {
src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}