Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
@font-face compatibilities; to code.. or not to code
Topic Started: Aug 19 2011, 11:51 AM (869 Views)
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
so.. Cory was kind enough to hook me up with the knowledge of weft/@font-face :killah:

unfortunately, cross browser support seems to be it's biggest drawback, even tho Chrome, FF, IE and Safari all claim to be @font-face compatible
this knowledge lead me on a search to find the best code for cross browser compatibility.. and I have yet to find any one proper, fully working code..

double declarations is what I'm using right now (example below), as it seems to be the one that functions the best
Chrome shows 4 out of 4 fonts (1 font is completely broken tho) and FF shows 3 out of 4, so in essence, they're tied - and IE ..well, who honestly cares what IE does LOL :j/k:

Code:
 
@font-face {
font-family: 'Gunplay';
src: url('http://z3.ifrm.com/130/68/0/f654970/gunplay_0.ttf');
src: local('Gunplay'), url('http://z3.ifrm.com/130/68/0/f654970/gunplay_0.ttf') format('opentype');
}
@font-face {
font-family: 'Octin Stencil Free';
src: url('http://z3.ifrm.com/130/68/0/f654971/octinstencilfree.ttf');
src: local('Octin Stencil Free'), url('http://z3.ifrm.com/130/68/0/f654971/octinstencilfree.ttf') format('truetype');
}
@font-face {
font-family: 'U.S.101';
src: url('http://z3.ifrm.com/130/68/0/f654972/US101.ttf');
src: local('U.S.101'), url('http://z3.ifrm.com/130/68/0/f654972/US101.ttf') format('truetype');
}
@font-face {
font-family: 'vtks ink';
src: url('http://z3.ifrm.com/130/68/0/f654973/vtksink.ttf');
src: local('vtks ink'), url('http://z3.ifrm.com/130/68/0/f654973/vtksink.ttf') format('truetype');
}


I've also found and tested code from fontspring (example below), which requires you use FontSquirrel's generator to produce new formats - this concept is money
because they provide the css for you along with the converted formats.. but it doesn't work at all in FF (for me), which lead me to not even test in Chrome and IE..
and even tho it didn't work, it seemed to lag my browser tremendously -.-

Code:
 
@font-face {
font-family: 'GunplayRegular';
src: url('gunplay_0-webfont.eot');
src: url('gunplay_0-webfont.eot?#iefix') format('embedded-opentype'),
url('gunplay_0-webfont.woff') format('woff'),
url('gunplay_0-webfont.ttf') format('truetype'),
url('gunplay_0-webfont.svg#GunplayRegular') format('svg');
}


so my question here is.. has anyone found or created a working @font-face code that has cross browser compatibilities, and if so, can you share it please?
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards - Theme & Code Support · Next Topic »
Add Reply