Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Use Custom Fonts on Your Site
Mottie (MVP) 5/14/2011 11:43 AM EST : RE: Use Custom Fonts on Your Site
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Jackel159!

Yeah, I tested all my code on my desktop... should have tried it live before posting about it =/

I've uploaded the font kit to my drop box files and set it up on my test site 4 and the font's show up fine in Chrome and IE7 & IE8, but not Firefox or IE9. I'm guessing there is still a problem with the font syntax. There is a great article by Paul Irish about @font-face which has other formats to try... I'll dig into this more.
TopBottom

Fenris Nihilus (Guild Admin) 5/14/2011 11:46 AM EST : RE: Use Custom Fonts on Your Site
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves

Does your method use the latest CSS3 style? Perhaps changing the syntax a bit will make it work in IE9 and such.
I'll be honest since CSS3 is pretty universal now I screw doing the compatibility crap for IE lol if you don't have IE 8 or higher too bad!
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
TopBottom

Mottie (MVP) 5/14/2011 12:13 PM EST : RE: Use Custom Fonts on Your Site
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

*sigh*

I just found this quote:

Fonts not loading in IE9

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

And yes, I was just posting the format that font squirrel or Google uses, I guess we may be stuck using Google's fonts for Firefox & IE9 (guess I'll need to test that and make sure it works as well).



I also found this post on a workaround (the second part with base64 encoding is what we could do):
Hosting the fonts on a different domain? Firefox requires some extra effort; you'll need to add the Access-Control-Allow-Origin header, whitelisting the domain you're pulling the asset from. Example .htaccess config here. Alternatively, you can use the base64 encoding in CSS (create it with the fontsquirrel generator) to avoid setting headers. details here


Wel, I tried the above method to encode the font, but Font Squirrel doesn't allow converting fonts you downloaded from their site... odd o.O
TopBottom

Fenris Nihilus (Guild Admin) 5/14/2011 3:21 PM EST : RE: Use Custom Fonts on Your Site
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves

So wait, whats wrong with uploading the fonts to your guildportal files and pulling it from there?
Also I found this font hosting site, might be useful? 
http://typefront.com/

Click Image to Visit Our Eve Corperation: The White Rose Conventicle
TopBottom

Fenris Nihilus (Guild Admin) 5/14/2011 4:03 PM EST : RE: Use Custom Fonts on Your Site
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves

Yay! I found an article regarding the access control header with firefox 3.5 by default all content including fonts has to be loaded locally, but if you want to specify absolute links or other domains hosting the fonts you have to make use of Cross-site http requests... read this article for more on it.

https://developer.mozilla.org/En/HTTP_Access_Control

This way you can load the fonts correctly without encoding in 64 and cluttering the css up. 

This second link might make more sense:
http://coyotecreation.com/codebits/2010/08/font-face-access-control-allow-origin-and-cross-origin-resource-sharing-in-web-typography/
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
TopBottom

Mottie (MVP) 5/15/2011 12:16 AM EST : RE: Use Custom Fonts on Your Site
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Yeah, I think the cross-site http requests will be something that GuildPortal has to modify before it'll work for us. Although the TypeFront link you shared looks interesting, I'll need to try it out 
TopBottom

Fenris Nihilus (Guild Admin) 5/15/2011 12:23 AM EST : RE: Use Custom Fonts on Your Site
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves

Does guildportal have certain css functions blocked or something for it to not work? prob for security huh
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
TopBottom

Mottie (MVP) 5/20/2011 5:38 PM EST : RE: Use Custom Fonts on Your Site
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Alright, Aaron just informed me that my ticket has been fixed

You can now access .woff and .svg files contained in your guild files. I think the only remaining problem is custom fonts not working in FF and IE9 because of the cross domain issue (our page is on GuildPortal, but the fonts are on axiomfiles.com). I'll keep looking into this...
TopBottom

Fenris Nihilus (Guild Admin) 5/21/2011 12:20 AM EST : RE: Use Custom Fonts on Your Site
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves

Thats great news! 

Doesn't that HTTP Access Control scrip fix that issue for firefox though? 

I think firefox just does this as a security feature to prevent ppl from stealing code or resources remotely. The script "if im correct" shows the host what domain is requesting the information and what information it wants then if the site accepts it, the browser will load the resources from the external domain correctly since it left a fingerprint in case the people want to track whats going on.

At least thats what I think is going on from reading the code and using common sense.

I think IE9 should just use the normal css3 way of loading fonts with eot format?
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
TopBottom

Nykeawyn (New Admin) 7/2/2011 10:40 AM EST : RE: Use Custom Fonts on Your Site
Nykeawyn
Posts: 246
Fingers of Fury!

I know I'm a major NOOB at this but I just can't seem to get this to work at all.  I put the code in CSS, but nothing.  Where is the font supposed to show up?  I'm really confused about this because I found a really good font that I would love to use but I can't seem to make it work.
@font-face {
  font-family: "Hobbiton Brushhand";
   src: url("http://typefront.com/fonts/825589164.eot");
  src: local("☺"),
  url("http://typefront.com/fonts/825589164.woff") format("woff"),
  url("http://typefront.com/fonts/825589164.ttf") format("truetype"),
  url("http://typefront.com/fonts/825589164.svg") format("svg");
}
p { font-family: "Hobbiton Brushhand", sans-serif; }
this font matches my Theme exactly Any assistance would be awesome!! Unfortunately, I have been thrown into the position of getting the website looking good and it's becoming more troublem than fun. Thanks, Nyk
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%