I got the following error using internet explorer 11.
CSS3111: #font-face encountered unknown error.
lato-v16-latin-100italic.eot
This is how I included it to fonts.css
/* lato-100italic - latin */
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 100;
src: url('../fonts/lato-v16-latin-100italic.eot'); /* IE9 Compat Modes */
src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
url('../fonts/lato-v16-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v16-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v16-latin-100italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v16-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v16-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
}
I followed https://google-webfonts-helper.herokuapp.com/fonts to include the fonts.
What can I do to solve this issue? I understand that comment src: url('../fonts/lato-v16-latin-100italic.eot'); /* IE9 Compat Modes */ that this is going to prevent errors in IE9..?
Related
I want to host my Google Font locally. I downloaded the files from Google Webfonts Helper and uploaded to public_html/fonts. I added the given code to my theme's style.css (see below).
Then I turned on "Disable Google Fonts" in the Clearfy plugin which actually removes the gstatic and googleapis requests on GTmetrix. However, my local fonts don't show.
Purging cache and server cache doesn't help. I checked the URL of the font location in my browser, it downloads the font, so I assume the path is correct.
Any ideas where the problem could be?
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* comfortaa-regular - latin */
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* comfortaa-700 - latin */
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
body{ font-family:"Comfortaa",sans-serif; }
On a website that I'm developing I am able to import and display via #font-face my custom font.
It works perfectly on different browsers
In the specific what I did was:
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
The problem is that when I try to import the .ttf and .svg formats the font is not displayed anymore and the Fallback font will be applied.
This is how I imported .svg and .ttf
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */
src: url('assets/fonts/MyCustomFont.ttf') format('truetype'); /* Safari, Android, iOS */
src: url('assets/fonts/MyCustomFont.svg#svgMyCustomFont') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
How come is this happening?
Is possible to fix it?
Thanks in advance
Put a comma at the end of each line instead of a ";" and only define the source once.
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'), /* IE9 Compat Modes */
url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/MyCustomFont.woff') format('woff'), /* Pretty Modern Browsers */
url('assets/fonts/MyCustomFont.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/MyCustomFont.svg#svgMyCustomFont') format('svg'); /* Legacy iOS */
}
I have developed a small engine that produces PDFs using wkhtmltopdf.
While working on my PC (Fedora 24) the generated PDF looked ok. After installing the software on a test server (CentOS 7), I found that the generated PDFs are slightly different.
I'm using a standalone (not installed via package manager) version of the tool. More precisely I'm using version wkhtmltopdf 0.12.3 (with patched qt)
After some investigation I noticed that the PDFs produced on my system contained these fonts:
Instead the PDF generated on the server contains these:
In the CSS I'm using these fonts for the whole document:
/* open-sans-300 - latin */
#font-face {
font-family: 'Open-Sans-Light';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans-v13-latin-300.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../fonts/open-sans-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
#font-face {
font-family: 'Open-Sans-Regular';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans'), local('OpenSans'),
url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
#font-face {
font-family: 'Open-Sans-Light-Italic';
font-style: italic;
font-weight: 300;
src: url('../fonts/open-sans-v13-latin-300italic.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'),
url('../fonts/open-sans-v13-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-300italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
#font-face {
font-family: 'Open-Sans-Bold';
font-style: normal;
font-weight: 700;
src: url('../fonts/open-sans-v13-latin-700.eot'); /* IE9 Compat Modes */
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('../fonts/open-sans-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
So why is wkhtmltopdf embedding extra fonts?
How can I make sure that wkhtmltopdf uses Open Sans only and that I can obtain the same PDF no matter which system I run the software on?
Right now it seems to pick randomly fonts it finds available in the system, besides the ones I specified :|
On Windows I had the opposite: on the development machine fonts were embedded in the PDF just fine, but on other machines (For example the production server) fonts were missing and not embedded.
I investigated the log files and all fonts were properly downloaded from the machine as expected when a PDF was generated.
As last resort I installed all fonts on the system of the server (via control panel). This resolved the issue....
I think this has to do with a difference in the fonts installed on the system.
I'm having trouble getting a font to display in Google Chrome (Version 51.0.2704.106 (64-bit))
Safari and Firefox work fine.
Here is the code I am using as an example.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
I have converted the font to woff2 on multiple sites. What might the problem be?
I recently had browser issues implementing #font-face on a website. Here were some of the solutions that worked:
Try using "" instead of '' for the url and format
Try not calling .svg last
Try specifying font-weight and font-style for each #font-face reference
Did you correctly reference the font-family later in the CSS?
With all the above changes, your code might look like this:
#font-face {
font-family: "MyWebFont";
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
url("webfont.ttf") format("truetype") /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
Later on in the stylesheet:
body {
font-family: "MyWebFont";
}
I use Lobster font, and it looks completely different in two chrome/firefox/opera/safari vs internet explorer.
It doesn't work in IE8, 7
You can see example here: dev.holiday.ge/xhtml -> look at the red logo in firefox vs IE.
in:
dev.holiday.ge/xhtml/all-ie-only.css
you have:
#font-face {
font-family: 'Lobster';
src: url('fonts/DroidSans.eot');
}
this should be something like:
#font-face {
font-family: 'Lobster';
src: url('fonts/Lobster.eot');
src: url('fonts/Lobster.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}
if you have the .eot
For best font compatibility use this syntax:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}