Summary
Testing Safari font import function without Flash or the user downloading the font. Works in Safari 4 but not in iPhone.
Date Created
21 June 2009
One Response to “@font-face”
Leave a Reply
Example
You need Safari 3.1+ to read the following line in the correct font.
If this works, the font you are looking at should be blocky. The font/typeface is called Necessity. You can learn more about that here.
The following is the same text as above, but without the particular "Necessity" font.
If this works, the font you are looking at should be blocky. The font/typeface is called Necessity. You can learn more about that here.
Internal CSS in <head>
@font-face{
font-family:"Necessity", Helvetica, sans-serif;
src: local("Necessity"), url('http://www.ivanwlam.com/experiments/files/programming/2009/090620-safariWebkitBasics/necessity.ttf') format("truetype");
}
#necessity, #necessity a{
font-family:Necessity;
font-size:72px;
}
HTML in Example
<p>You need Safari 3.1+ to read the following line in the correct font.</p>
<p id="necessity">If this works, the font you are looking at should be blocky. The font/typeface is called Necessity. You can learn more about that <a href="http://ivanwlam.com/experiments/type/2009/05/23/necessity-10/" title="Necessity < Type < Experiments < ivanwlam.com">here.</a></p>
<p>The following is the same text as above, but without the particular "Necessity" font.</p>
<p>If this works, the font you are looking at should be blocky. The font/typeface is called Necessity. You can learn more about that <a href="http://ivanwlam.com/experiments/type/2009/05/23/necessity-10/" title="Necessity < Type < Experiments < ivanwlam.com">here.</a></p>
[...] @font-face – a CSS rule to import fonts without Flash or the user downloading the font. Here I used my Necessity font as an example. [...]