font-face issue

[nervino]

Hi All,
I'm trying to use a custom font (from fontsquirrel.com) but I have a problem.
The font is displayed correctly when I load the site, but when I click on a menu link, changing site's page, the text rendered by the custom font disappears and comes back immediately after.

I tested this behaviour with Firefox 8, Chrome, IE 8 on Win Xp.

Does anyone know if you can avoid the disappearance of the text and how?

(I can't post a link to the site because I'm developing it locally, with VMWare..)

thanks



In CSS file I put:

Code: Select all

@font-face {
    font-family: 'NewCicleGordita';
    src: url('[[root_url]]/fonts/New_Cicle_Gordita-webfont.eot');
    src: url('[[root_url]]/fonts/New_Cicle_Gordita-webfont.eot?#iefix') format('embedded-opentype'),
         url('[[root_url]]/fonts/New_Cicle_Gordita-webfont.woff') format('woff'),
         url('[[root_url]]/fonts/New_Cicle_Gordita-webfont.ttf') format('truetype'),
         url('[[root_url]]/fonts/New_Cicle_Gordita-webfont.svg#NewCicleGordita') format('svg');
    font-weight: normal;
    font-style: normal;

}

.newfont {
line-height: normal;
font-weight: normal;
font-family: 'NewCicleGordita', sans-serif;
}

----------------------------------------------

Cms Version: 1.10.2

Installed Modules:

CMSMailer: 2.0.2
FileManager: 1.2.0
MenuManager: 1.7.7
ModuleManager: 1.5.3
CGBlog: 1.8.1
Printing: 1.1.2
Search: 1.7
ThemeManager: 1.1.4
TinyMCE: 2.9.4
CMSPrinting: 1.0
MicroTiny: 1.1.1
FormBuilder: 0.7.1
CGSimpleSmarty: 1.4.10
CGExtensions: 1.27.2


Config Information:

php_memory_limit:
process_whole_template: false
output_compression: false
max_upload_size: 32000000
default_upload_permission: 664
url_rewriting:
page_extension: .html
query_var: page
image_manipulation_prog: GD
auto_alias_content: true
locale: it_IT.UTF-8
default_encoding: utf-8
admin_encoding: utf-8
set_names: true


Php Information:

phpversion: 5.2.6-1+lenny2
md5_function: On (Vero)
gd_version: 2
tempnam_function: On (Vero)
magic_quotes_runtime: Off (Falso)
E_STRICT: 0
memory_limit: 128M
max_execution_time: 300
output_buffering: On
safe_mode: Off (Falso)
file_uploads: On (Vero)
post_max_size: 24M
upload_max_filesize: 24M
session_save_path: /var/lib/php5 (1733)
session_use_cookies: On (Vero)
xml_function: On (Vero)


Server Information:

Server Api: cgi-fcgi
Server Db Type: MySQL (mysqli)
Server Db Version: 5.0.24a


----------------------------------------------

[nervino]

Well, I've found that this is a well known and common behaviour using font-face, and it's not a cmsms related issue.
Read, for example:
http://paulirish.com/2009/fighting-the-font-face-fout/


Nevertheless, any tips or tricks to solve it are welcome.

[brentnl]

Mhh .. same issue over here. If somehow we could use relative url's in the CSS instead of the absolute path the problem would be solved.

[Dr.CSS]

Have you tried src: url(../../fonts/New_Cicle_Gordita-webfont.eot);
drop the ' ' inside the url( call the format is fine with ' ' ...

I would put them in the uploads/font/ folder instead of having them come from the root/fonts folder...

I've used font-squirrel sets on many sites including 1.10.3, no problem...

[lewishowles]

FOUT can be a bigger problem in some browsers than others, on some networks, etc, but if you're just using @font-face I'm not sure there's much you can do to remedy it.

Personally we use TypeKit, or where a font isn't available, Google Web Fonts which both have more control over letting you know when a font is or is not loaded - so we can hide text until it's loaded (a fraction of a second, usually not noticeable), but it entirely avoids the issue.

[nervino]

Thanks. I'll try all your suggestions.

[Dr.CSS]

Font-face even when you turn off JS...

[lewishowles]

Yes, and you need the proper licenses for the font to use font-face since it's so easy to steal, many of which aren't provided as standard...