StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>From <a href="http://readableweb.com/mo-bulletproofer-font-face-css-syntax/" rel="nofollow noreferrer">http://readableweb.com/mo-bulletproofer-font-face-css-syntax/</a></p> <blockquote> <p>Now that web fonts are supported in Firefox 3.5 and 3.6, Internet Explorer, Safari, Opera 10.5, and Chrome, web authors face new questions: How do these implementations differ? What CSS techniques will accommodate all? Firefox developer John Daggett recently posted a little roundup about these issues and the workarounds that are being explored. In response to that post, and in response to, particularly, Paul Irish’s work, I came up with the following @font-face CSS syntax. It’s been tested in all of the above named browsers including IE 8, 7, and 6. So far, so good. The following is a test page that declares the free Droid font as a complete font-family with Regular, Italic, Bold, and Bold Italic. View source for details. Alert: Be aware that Readable Web has released it’s first @font-face related software utility for creating natively compressed EOT files quickly and easily. It has it’s own web site and, in addition to the utility itself, the download package contains helpful documentation, a test font, and an EOT test page. It’s called EOTFAST If you’re working with @font-face, it’s a must-have.</p> <p>Here’s The Mo’ Bulletproofer Code:</p> </blockquote> <pre><code>@font-face{ /* for IE */ font-family:FishyFont; src:url(fishy.eot); } @font-face { /* for non-IE */ font-family:FishyFont; src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype"); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload