Recently I tried to use a font family called futura , which is just in Mac system. While I opened IE to test, it was replaced.
I first tried Font-Spider, an awesome app with 2 major functions: font format transferring, font compressing.
- My system is Mac OS X, and I’ve already had
npm
,Grunt
andNode.js
. So I followed the installation steps from GitHub (very clear steps);
[caption id=”” align=”aligncenter” width=”398”] configure[/caption]
-
after installed, configured, I added some info into my CSS and Gruntfile.js;
-
I ran
grunt
in my terminal, the new, mini, related font family files with different kinds were created, containseot
, woff
,
ttf
andsvg
. Nice!
[caption id=”” align=”aligncenter” width=”388”] success process[/caption]
-
But then I found the new font was NOT like the original one. It’s just a public font family, a little similar with
Helvetica
andArial
. -
I tested a Chinese font, and it worked, that means both my configure and processes are right.
-
So I think Font-Spider doesn’t support English fonts.
Actually, there is no need for Font-spider to support English fonts: their sizes are too small to pay attention. So I decided to load the original font file to make the compatibility work:
@font-face {
font-family: 'futura';
src: url('../font/futura.ttf') format('truetype');
}
- I used
@font-face
to embed the font source. But it seemed IE9 got some problem, it doesn’t allow me to load.
[caption id=”” align=”aligncenter” width=”921”] ie9 error[/caption]
-
I got 2 articles to help me with this problem: Make Adobe fonts work with CSS3 @font-face in IE9, CSS3114: @font-face 未能完成 OpenType 嵌入权限检查.
-
So I changed my code to this:
@font-face {
font-family: 'futura';
src: url('../font/futura.eot');
src:
/* 此行是为了获取IE嵌入权限 */
url('../font/futura.eot?#iefix') format('embedded-opentype'),
/* 此行是为了嵌入正常ttf字体文件,供大多数浏览器使用 */
url('../font/futura.ttf') format('truetype');
}
-
It works! IE9 successfully used the
futura
font! But it still threw an error on thettf
file. -
Lastly, I put
eot
beyondttf
, then it works without error.@font-face {
font-family: 'futura';
src: url('../font/futura.eot');
src:
/* 此行是为了嵌入正常ttf字体文件,供大多数浏览器使用 */
url('../font/futura.ttf') format('truetype'), /* 此行是为了获取IE嵌入权限 */ url('../font/futura.eot?#iefix') format('embedded-opentype');
}
From these issues above, I come up with 2 conclusions:
-
In the future, Font-Spider will be a great partner to help me deal with Chinese fonts;
-
IE9 needs some special settings to make the embedded fonts work, and the setting should be appropriated among all fonts.