My site: http://arethebaronsplaying.com/
isn't rendering fonts correctly in IE 10 or IE 11. Here's my css:
#font-face {
font-family: 'Mono Social Icons Font';
src: asset_url('fonts/MonoSocialIconsFont-1.10.eot');
src: asset_url('fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
asset_url('fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
asset_url('fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
asset_url('fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: asset_url('fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'hamilton18';
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot');
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot?#iefix') format('embedded-opentype'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.woff') format('woff'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.ttf') format('truetype'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.svg#MonoSocialIconsFont') format('svg');
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Everything looks great in chrome/safari/firefox. Any ideas?
To solve this problem just add -ms-font-feature-settings:"liga" 1; to your css
for example:
.social .icon {
-ms-font-feature-settings:"liga" 1;
font-family:'Mono Social Icons Font';
-webkit-text-rendering:optimizeLegibility;
-moz-text-rendering:optimizeLegibility;
-ms-text-rendering:optimizeLegibility;
-o-text-rendering:optimizeLegibility;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
}
Looking at the console in IE of your website, there appear following error -
"CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable."
On web, these are the two links which talk about this issue and common solution:
https://github.com/tapquo/lungo.icon/issues/1
and
http://codecanyon.net/forums/thread/css3114-fontface-failed-opentype-embedding-permission-check-permission-must-be-installable/78963
common solution link:
http://carnage-melon.tom7.org/embed/
However the talked tool seems available only for older version of windows and not for latest version of windows.
Related
In my project I need to use Gotham Book font-family and I am using following code:
#font-face {
font-family: 'Gotham Book';
src:
url('assets/fonts/Gotham-Book.eot'),
url('assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/Gotham-Book.woff2') format('woff2'),
url('assets/fonts/Gotham-Book.woff') format('woff'),
url('assets/fonts/Gotham-Book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
If perfectly works in android devices and other browsers except safari browser.
Please suggest what is the wrong in my code.
What causing this issue?
I also tried with Gotham Book svg import, but did not worked for me.
Thank You in advance!
This is the working Solution
CSS :
#font-face {
font-family: "gotham";
src: url('ff/Gotham-Book.woff') format('woff'),
url('ff/Gotham-Book.woff2') format('woff2'),
url('ff/Gotham-Book.ttf') format('truetype');
font-weight: normal;
}
and Please replace your existing font by downloading font from below URl:
https://drive.google.com/open?id=1pbdpXbPRCJC6Qi-QpNGt7WbLuwtwDRUW
Thanks
Try adding the whole URL of the font assets.
CSS:-
#font-face {
font-family: 'Gotham Book';
src:
url('https://www.example.com/assets/fonts/Gotham-Book.eot'),
url('https://www.example.com/assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
url('https://www.example.com/assets/fonts/Gotham-Book.woff2') format('woff2'),
url('https://www.example.com/assets/fonts/Gotham-Book.woff') format('woff'),
url('https://www.example.com/assets/fonts/Gotham-Book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Thanks
I am developing a responsive web application. I encountered a problem that the font family doesn't work as expected on mobile, but it works as expected on a computer. Why is this the case?
Code:
HTML
<link href="css/fonts/fonts.css" rel='stylesheet' type='text/css' />
CSS
#font-face {
font-family: 'uni_sans_regularregular';
src: url('uni-sans-regular-webfont.eot');
src: url('uni-sans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-regular-webfont.woff') format('woff'),
url('uni-sans-regular-webfont.ttf') format('truetype'),
url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_bold_italicitalic';
src: url('uni-sans-bolditalic-webfont.eot');
src: url('uni-sans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bolditalic-webfont.woff') format('woff'),
url('uni-sans-bolditalic-webfont.ttf') format('truetype'),
url('uni-sans-bolditalic-webfont.svg#uni_sans_bold_italicitalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_boldregular';
src: url('uni-sans-bold-webfont.eot');
src: url('uni-sans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bold-webfont.woff') format('woff'),
url('uni-sans-bold-webfont.ttf') format('truetype'),
url('uni-sans-bold-webfont.svg#uni_sans_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_thinregular';
font-weight: normal;
font-style: normal;
}
Thanks in advance
First, open your SVG file with a text editor and find out if the name you've written in the hashtag for the SVG matches what it says in the file.
If it matches, try this, if not, adjust accordingly.
#font-face {
font-family: 'uni_sans_regular';
src: url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
src: url('uni-sans-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body { font-family:'uni_sans_regular',Arial,sans-serif; }
If the font still doesn't display on mobile then I'd assume your SVG or WOFF font files are corrupt, the path to the font file is not correct, or the files aren't downloading to the mobile device for some other reason (slow connection perhaps).
The SVG file should work for Firefox 3.5, Chrome 0.3, Safari 3.1, Opera 9, and all iOS devices. The TTF file will pick up IE9 and Android 2.2. You don't need the EOT file unless you want to cover IE8-. I just reduced it to the minimum number of includes so you can narrow down the issue.
If your hosting the file on an IIS server, you may need to adjust your server settings. IIS will not serve files with unknown MIME types so you must set the MIME type for SVG to image/svg+xml, similarly for WOFF. Instructions from Microsoft (link)
If your testing with a 3rd party browser app on your mobile device, try testing on the default browser that comes with the device because many 3rd party apps have their own quirks.
I am trying to use Open Sans (Turkish version)
I am pretty sure i applied correct syntax. however Turkish character looks different in IE 7,8
IE 9
IE8 and IE7
#font-face {
font-family: 'open_sansregular';
src: url('Fonts/OpenSans-Regular-webfont.eot');
src: url('Fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('Fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('Fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sanssemibold';
src: url('Fonts/OpenSans-Semibold-webfont.eot');
src: url('Fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('Fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('Fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('Fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT
This is strange I uploaded example here and it works perfectly. Problem still exist on localhost
I am using VS 2013 and IIS Express 8.0
Solution
download fonts from font-squirrel
Upload them to font-squirrel's Font-Generalor
Check Keep existing in Trutype Hinting Section
My custom fonts aren't rendering in ie8.
I've allready tried clearing the cache, and I'm also sending the correct filetypes if I'm not mistaken.
What am I missing here?
#font-face {
font-family: 'Lobster';
src: url('fonts/lobster.eot');
src: url('fonts/lobster.eot') format('embedded-opentype'),
url('fonts/lobster.woff') format('woff'),
url('fonts/lobster.ttf') format('truetype'),
url('fonts/lobster.svg#Lobster1.4Regular') format('svg');
}
.logoHome{color:#FFF; font: 58px Lobster, serif; text-decoration:none; line-height:58px;}
the problem it is easy solve, just make the url path to be relative:
#font-face {
font-family: 'Lobster';
src: url('http://www.sample.com/fonts/lobster.eot');
src: url('http://www.sample.com/fonts/lobster.eot?#iefix') format('embedded-opentype'),
url('http://www.sample.com/fonts/lobster.woff') format('woff'),
url('http://www.sample.com/fonts/lobster.ttf') format('truetype'),
url('http://www.sample.com/fonts/lobster.svg#Lobster13Regular') format('svg');
font-weight: normal;
font-style: normal;
}
but this will only work down to IE8 you can use this caniuse.com to always check which thing you can use in older browsers
The first line gave an error.
Removing:
src: url('fonts/lobster.eot');
Did the trick.
I am trying to use a custom font for my website, but it appears wrong in Chrome (latest) and Opera browsers although it appears correctly (smooth) on other browsers. I tried couple of different fonts, with same results on Chrome/Opera.
My code:
#font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'), url('../fonts/Eurostile.woff') format('woff'), url('../fonts/Eurostile.ttf') format('truetype'), url('../fonts/Eurostile.svg') format('svg');
font-weight: normal;
font-style: normal;
}
The issue:
Thats just how the browser and OS renders the font..but try to call the .svg format before the .woff format it might fix this.
#font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'),
url('../fonts/Eurostile.svg') format('svg'),
url('../fonts/Eurostile.woff') format('woff'),
url('../fonts/Eurostile.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I'll refer you to this question:
https://stackoverflow.com/a/4060778/1121870
Or try font-smooth:
http://www.w3.org/TR/WD-font/#font-smooth-prop
And there's a nasty little hack here:
http://www.elfboy.com/blog/text-shadow_anti-aliasing/