Font Face rare issue

Malize · 2012-09-04 12:56:32

Hi,

I checked this issue in lots of other font-related forums and, once I ran out of solutions, my last guess is that it’s a textpattern issue.

Site: http://www.karactermania.com/web2012/betty

Font Face is not showing font propperly in Firefox 13. Fonts are hosted in the same server, into the same folder, and I even called the CSS from outside the textpattern (into the same folder also).

I also tried the .htaccess trick but it didn’t work. Fonts are in truetype format, woff and eot format.

Any ideas?

Thanks :)

Gocom · 2012-09-04 15:05:57

In CSS you are trying to load fonts from /fonts/* directory. Being a relative path starting with a forward slash, it translates to:

http://www.karactermania.com/fonts/Ubuntu-C.ttf

But your fonts are not there. You are simply just linking to the wrong location. Your fonts really are in web2012 sub-directory:

http://www.karactermania.com/web2012/fonts/Ubuntu-C.ttf

Outside from fonts, you have other broken paths trying to link to some images and such too.

Some basic guides about paths:

Last edited by Gocom (2012-09-04 15:09:23)

Malize · 2012-09-12 11:46:10

Thanks for your answer.

I double checked what you mean and it’s true, some paths had a previous slash and some were without, so I corrected them to full paths.

Unfortunately, even corrected, Firefox 15.0 and IE9 doen’t work either.

Gocom · 2012-09-12 12:39:52

The content-type for fonts isn’t correct. All font files you are now linking are served as text/plain.

Since you are now using absolute paths, setting Access-Control-Allow-Origin wouldn’t be a bad idea, since anyone accessing the site without www. subdomain will not have access to the fonts due to cross-domain restrictions. I would really recommend using relative paths, not absolute.

Furthermore, you are not supplying any style variation of the font. As you are using the font for body content, you should be supplying bold and italic versions of it, unless you are never going to use bold or italic styles (which you currently are).

Malize · 2012-09-12 13:02:37

Would you mind to explain this part?

Gocom wrote:

The content-type for fonts isn’t correct. All font files you are now linking are served as text/plain.

Gocom · 2012-09-12 22:25:55

Malize wrote:

Would you mind to explain this part?

Content-type HTTP header. When accessing the font files, the header is sent text/plain. Content-type headers are used to decide what file is what, and what the client does with the file. Since the header is set as text/plain for those files, those fonts are not recognized as fonts, but served as text files and essentially ignored.

philwareham · 2012-09-13 06:46:38

If you’re on Apache, add this in your .htaccess file and the fonts should then use the proper MIME type (from HTML5 Boilerplate):

# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

Destry · 2012-09-13 06:59:32

Phil,

Would that interfere with anything for someone using Typekit, FontDeck, or whatever? I’m guessing not, but…

philwareham · 2012-09-13 07:15:45

@Destry

No, as they are served from an external server (so they’d use that servers config) – this would only affect local fonts.

Last edited by philwareham (2012-09-13 07:16:22)

Malize · 2012-09-13 14:02:49

I tried to add this lines to the .htaccess file and the web just dissapeared. Any other ideas?

philwareham wrote:

If you’re on Apache, add this in your .htaccess file and the fonts should then use the proper MIME type (from HTML5 Boilerplate):

# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

colak · 2012-09-13 16:25:58

Malize wrote:

I tried to add this lines to the .htaccess file and the web just dissapeared. Any other ideas?

Did you get a 500 error?

Gocom · 2012-09-13 19:35:24

Phil’s code requires that you have access to mod_mime module. While part of Apache 2 base package, it’s not part of the core. If the whole website turns blank, changes are, it’s not installed.

Having difficulties, not enough access to set type handler? I would advice contacting your hosting provider’s support staff. It shouldn’t take them more than few secs to set correct type handlers for your font files, or to advice how you can do it.

You could of course also try and see if some other module is installed. Like trying out mod_headers injunction with FilesMatch directive, and so forth.

Textpattern CMS

Textpattern CMS support forum

#1 2012-09-04 12:56:32

Font Face rare issue

#2 2012-09-04 15:05:57

Re: Font Face rare issue

#3 2012-09-12 11:46:10

Re: Font Face rare issue

#4 2012-09-12 12:39:52

Re: Font Face rare issue

#5 2012-09-12 13:02:37

Re: Font Face rare issue

#6 2012-09-12 22:25:55

Re: Font Face rare issue

#7 2012-09-13 06:46:38

Re: Font Face rare issue

#8 2012-09-13 06:59:32

Re: Font Face rare issue

#9 2012-09-13 07:15:45

Re: Font Face rare issue

#10 2012-09-13 14:02:49

Re: Font Face rare issue

#11 2012-09-13 16:25:58

Re: Font Face rare issue

#12 2012-09-13 19:35:24

Re: Font Face rare issue

Board footer