Custom font won't display after moving the site to new host

dorka · 2013-09-30 21:04:00

Hello there,
I moved successfully my site to a new host and every thing worked OK except of the web fonts.
The files are transfered, the css is working, too. I changed the path to the files in @font-face in the css file to the new location as follows:

 @font-face {
	font-family: 'ElinaWeb';
	src: url('http://www.salonpodjabloni.eu/files/ELINA__W.eot');
	src: url('http://www.salonpodjabloni.eu/files/Elina Web'),  
             url('http://www.salonpodjabloni.eu/files/ElinaWeb'), 
	     url('http://www.salonpodjabloni.eu/files/ELINA__W.eot?#iefix') format('embedded-opentype'),
	     url('http://www.salonpodjabloni.eu/files/ELINA__W.woff') format('woff'),
	     url('http://www.salonpodjabloni.eu/files/ELINA__W.ttf') format('truetype'), 
	     url('http://www.salonpodjabloni.eu/files/ELINA__W.svg#ElinaWeb') format('svg');
	font-weight: normal;
	font-style: normal;
}

the url on the test site had a relative path, which doesn’t seem to work on the new site:

@font-face {
	font-family: 'ElinaWeb';
	src: url('./files/ELINA__W.eot');
	src: url('./files/Elina Web'),  
             url('./files/ElinaWeb'), 
	     url('./files/ELINA__W.eot?#iefix') format('embedded-opentype'),
	     url('./files/ELINA__W.woff') format('woff'),
	     url('./files/ELINA__W.ttf') format('truetype'), 
	     url('./files/ELINA__W.svg#ElinaWeb') format('svg');
	font-weight: normal;
	font-style: normal;
}

or maybe the problem is elsewhere?
Thanks for the help

Last edited by dorka (2013-09-30 21:09:42)

uli · 2013-09-30 23:20:53

You’ve changed the paths only for one font out of three.

CodeWalker · 2013-10-01 06:54:17

Could be missing mime types for fonts. Apache won’t know how to serve them. Try adding mime types to your htaccess file.

dorka · 2013-10-02 09:05:09

uli: I changed the path to all three fonts, I only didn’t find necessary quoting all three paths. If I am making a mistake in the sintax I supposed it would come to light in this chunk. Besides neither of the fonts is displayed properly. Thanks anyway.

CodeWalker: this sounds promissing :-). I have never changed mime type in htaccess file. Could someone please send me an example how to do that, please? Thanks

Last edited by dorka (2013-10-02 09:05:56)

uli · 2013-10-02 10:48:16

dorka wrote:

uli: I changed the path to all three fonts

This code is still in your “default” stylesheet, can’t tell, however, whether you’ve referenced the fonts elsewhere.

@charset "utf-8";
@font-face {
    font-family: 'ContaxSans55Regular';
    src: url('./files/ContaxSans55Reg-webfont.eot');
    src: url('./files/ContaxSans55Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('./files/ContaxSans55Reg-webfont.woff') format('woff'),
         url('./files/ContaxSans55Reg-webfont.ttf') format('truetype'),
         url('./files/ContaxSans55Reg-webfont.svg#ContaxSans55Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ContaxSans56Italic';
    src: url('http://www.dorastamenova.com/salonpodjabloni/files/ContaxSans56Ita-webfont.eot');
    src: url('http://www.dorastamenova.com/salonpodjabloni/files/ContaxSans56Ita-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.dorastamenova.com/salonpodjabloni/files/ContaxSans56Ita-webfont.woff') format('woff'),
         url('http://www.dorastamenova.com/salonpodjabloni/files/ContaxSans56Ita-webfont.ttf') format('truetype'),
         url('http://www.dorastamenova.com/salonpodjabloni/files/ContaxSans56Ita-webfont.svg#ContaxSans56Italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'ElinaWeb';
	src: url('./files/ELINA__W.eot');
	src: url('./files/Elina Web'),  
             url('./files/ElinaWeb'), 
	     url('./files/ELINA__W.eot?#iefix') format('embedded-opentype'),
	     url('./files/ELINA__W.woff') format('woff'),
	     url('./files/ELINA__W.ttf') format('truetype'), 
	     url('./files/ELINA__W.svg#ElinaWeb') format('svg');
	font-weight: normal;
	font-style: normal;
}

Gocom · 2013-10-02 11:33:50

Two of the specified files do not exists:

url('http://www.salonpodjabloni.eu/files/Elina Web'),  
url('http://www.salonpodjabloni.eu/files/ElinaWeb')

Second thing is that your server is sending bad headers:

Access-Control-Allow-Origin: http://mysite.com

That CORS header isn’t right. Someone seems to have skipped steps when setting up the server. Caching related headers need work too:

Last-Modified: Mon, 30 Sep 2013 13:30:04 GMT
ETag: "982ece-faea-4e799d57c2c95"
Cache-Control: max-age=600
Expires: Wed, 02 Oct 2013 11:31:54 GMT

You aren’t allowing/instructing clients to cache the large font files, and sending all those may be counter productive; one caching instructing header is enough.

Gocom · 2013-10-02 11:55:06

CodeWalker wrote:

Could be missing mime types for fonts. Try adding mime types to your htaccess file.

His Content-Type headers as just fine:

Content-Type: image/svg+xml
Content-Type: application/x-font-ttf
Content-Type: application/x-font-woff
Content-Type: application/vnd.ms-fontobject

Apache won’t know how to serve them.

That’s not true. Apache versions predating web fonts and their filetypes of course will not have extension mappings in the default configuration. Reality check; SVG was added to the default configuration 10 year ago and rest followed when web fonts support was introduced.

philwareham · 2013-10-02 12:59:04

Also, as a minor side-note, I wouldn’t put items related to site presentation in directories intended for content. i.e. I wouldn’t use Textpattern’s files directory for storing fonts.

Content and style should be kept apart at all times.

That’s nothing to do with this problem though.

GugUser · 2013-10-02 13:11:29

What’s the folder structure on the server and which is the content of the .htaccess file?

dorka · 2013-10-03 08:16:21

Uli:
This code is still in your “default” stylesheet…

Sorry, Uli, you were right, the old paths were stil there (must hav forgotten o save the last time I fiddled with it :-( ). I’ve fixed that now.

philwareham:

I wouldn’t use Textpattern’s files directory for storing fonts.

I moved the files to separate folde, thanks for the advise.

gocom:

Two of the specified files do not exists:

Yes, I realized that, too, this was a bad path name. I removed this. However the right paths were there, following, so I think this should’t be THE problem, am I right?

Second thing is that your server is sending bad headers

Access-Control-Allow-Origin: http://mysite.com bc.

Now this may be the problem. I found this line in the .htaccess file. May be I have to change something in it after all?

Here it is:

#DirectoryIndex index.php index.html

#Options +FollowSymLinks
#Options -Indexes
#ErrorDocument 403 default

<IfModule mod_rewrite.c>
	RewriteEngine On
	#RewriteBase /relative/web/path/

	RewriteCond %{REQUEST_FILENAME} -f [OR]
	RewriteCond %{REQUEST_FILENAME} -d
	RewriteRule ^(.+) - [PT,L]

	RewriteCond %{REQUEST_URI} !=/favicon.ico
	RewriteRule ^(.*) index.php

	RewriteCond %{HTTP:Authorization}  !^$
	RewriteRule .* - [E=REMOTE_USER:%{HTTP:Authorization}]
</IfModule>

#php_value register_globals 0

# SVG
AddType image/svg+xml  svg svgz
AddEncoding gzip       svgz

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://mysite.com"
  </IfModule>
</FilesMatch> bc.

Last edited by dorka (2013-10-03 08:24:41)

dorka · 2013-10-03 09:32:38

Hi guys, I am already used to feeling embarassed here in txp forum, so once more doesn’t matter. It looks like the fonts work ok now and I have no idea why. The man from the server support sees it OK, my husband sees it ok on his PC, only I don’t (and NOT becouse I didn’t erase the cashe in the browsers). Well anyway I hope next time I’ll come up with something that will be more usefull for someone else. Thanks to you all.

JUST ONE MORE THING, PLEASE:

You aren’t allowing/instructing clients to cache the large font files, and sending all those may be counter productive; one caching instructing header is enough.

How do I fix that?

Last edited by dorka (2013-10-03 09:38:43)

Gocom · 2013-10-03 09:42:21

dorka wrote:

Now this may be the problem.

CORS, as in “Cross-site HTTP request”, only affects cross domain requests. It has no effect to same-domain requests, but since you are linking to cross-domain stylesheets (unlike in your opening post, where you are using different domain), you will have configure it properly.

May be I have to change something in it after all?

You do. Read the specs. Either omit it (if you are serving files from the same domain), use a wildcard or specify correct origin domain.

the url on the test site had a relative path, which doesn’t seem to work on the new site:

Of course the relative URLs will work. Any URLs are relative to the stylesheet location. Including full URL is pointless.

Textpattern CMS

Textpattern CMS support forum

#1 2013-09-30 21:04:00

Custom font won't display after moving the site to new host

#2 2013-09-30 23:20:53

Re: Custom font won't display after moving the site to new host

#3 2013-10-01 06:54:17

Re: Custom font won't display after moving the site to new host

#4 2013-10-02 09:05:09

Re: Custom font won't display after moving the site to new host

#5 2013-10-02 10:48:16

Re: Custom font won't display after moving the site to new host

#6 2013-10-02 11:33:50

Re: Custom font won't display after moving the site to new host

#7 2013-10-02 11:55:06

Re: Custom font won't display after moving the site to new host

#8 2013-10-02 12:59:04

Re: Custom font won't display after moving the site to new host

#9 2013-10-02 13:11:29

Re: Custom font won't display after moving the site to new host

#10 2013-10-03 08:16:21

Re: Custom font won't display after moving the site to new host

#11 2013-10-03 09:32:38

Re: Custom font won't display after moving the site to new host

#12 2013-10-03 09:42:21

Re: Custom font won't display after moving the site to new host

Board footer