I Cant get @font face to work for internet explorer 11
Question
I have been trying to use a custom font it seems to work on everything but not internet explorer 11. Am I missing something really easy here to make this work?
@font-face {
font-family: 'comfortaa';
src: url('Comfortaa.eot'); /* IE9 Compat Modes */
src: url('Comfortaa.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Comfortaa_Regular.ttf.woff') format('woff'), /* Modern Browsers */
url('../fonts/Comfortaa_Regular.ttf') format('truetype'), /* Safari, Android,
iOS */
url('../fonts/Comfortaa_Regular.svg') format('svg'); /* Legacy iOS */
}
@font-face {
font-family: 'comfortaabold';
src: url('Comfortaa-Bold.eot'); /* IE9 Compat Modes */
src: url('Comfortaa-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Comfortaa-Bold.ttf.woff') format('woff'), /* Modern Browsers */
url('../fonts/Comfortaa-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/Comfortaa-Bold.svg') format('svg'); /* Legacy iOS */
}
2 answers
solution1
1 2014-12-04 00:14:49
If you are new to coding, maybe the easiest solution is to embed the font by putting it in the beginning of your <head> tag like this:
<link href='http://fonts.googleapis.com/css?family=Comfortaa:700' rel='stylesheet' type='text/css'>
There are several similar questions asked and answered that can help you troubleshoot:
- How to make Google Fonts work in IE?
- IE 11 “bulletproof” font-face and fall back fonts not working
- Google Fonts not working in Internet Explorer (IE) 11
- IE 11 doesn't process font declaration correctly
- IE Intranet Compatibility View not including certain font
- and more...
It is wise to do a search before you post a question.
If you'd like to test your site in Explorer on a Mac, there is even questions and answers for that. This one should work well if you have several GBs to spare. If not you can look into the new Azure RemoteApp for Windows, Mac OSX, iOS or Android devices.
solution2
1 2015-10-01 09:48:34
This works fine for IE 11
@font-face
{
font-family: "MyFont_Lite";
src: url("../Fonts/myfont.ttf") format("truetype");
src: url("../Fonts/myfont.woff") format("woff");
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.