[Solved] Utilisation d'une police custom (Compass/PS1.6)

[Templar77400]

Bonjour à tous,

 

 

Je suis sous PS 1.6 et j'ai un autre problème ennuyeux que je rencontre actuellement lors de l'utilisation d'une police custom.
Je l'ai définie dans _theme_variables.scss comme ceci :

@font-face {
	font-family: 'Font-Autourde';
	src: url('../font/OratorStd.eot?') format('eot'), 
	     url('../font/OratorStd.otf')  format('opentype'),
	     url('../font/OratorStd.woff') format('woff'), 
	     url('../font/OratorStd.ttf')  format('truetype'),
	     url('../font/OratorStd.svg#OratorStd') format('svg');
}

Mes fonts sont dans themes/mytheme/font

Je travaille en local et la police fonctionne bien sauf que les textes écrits dans cette police mettent un temps énorme à se charger à chaque actualisation de la page.
J'ai donc été voir dans l'inspecteur Chrome et j'ai vu que j'avais des erreurs qui font ralentir la page :

GET http://localhost/autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.otf 404 (Not Found) jquery-1.11.0.min.js:2
GET http://localhost/autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.otf 404 (Not Found) jquery-1.11.0.min.js:2
GET http://localhost/autourdelamaison/themes/autourde/css/modules/font/OratorStd.otf 404 (Not Found) jquery-1.11.0.min.js:2
GET http://localhost/autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.woff 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.woff:1
GET http://localhost/autourdelamaison/themes/autourde/css/modules/font/OratorStd.woff 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/font/OratorStd.woff:1
GET http://localhost/autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.woff 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.woff:1
GET http://localhost/autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.ttf 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.ttf:1
GET http://localhost/autourdelamaison/themes/autourde/css/modules/font/OratorStd.ttf 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/font/OratorStd.ttf:1
GET http://localhost/autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.ttf 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.ttf:1
GET http://localhost/autourdelamaison/themes/autourde/css/modules/font/OratorStd.svg 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/font/OratorStd.svg#OratorStd:1
GET http://localhost/autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.svg 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.svg#OratorStd:1
GET http://localhost/autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.svg 404 (Not Found) /autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.svg#OratorStd:1

Est-ce normal ? Avez-vous aussi ce problème en utilisant une police custom ?
Faut-il que je définisse la police avec font-face pour chaque module qui l'utilise ? 
C'est peut-être du au fait que mon cache est désactivé et la compilation forcée, mais ça parait quand même bizarre. Les textes mettent bien 5 secondes à s'afficher à chaque actualisation alors que le reste du contenu de la page s'affiche instantanément.

Si vous avez une idée n'hésitez pas je bloque depuis plusieurs jours.

Merci

Templar

Edited July 25, 2014 by Templar77400 (see edit history)

[Templar77400]

Up, j'ai toujours ce problème et impossible de comprendre pourquoi ...

[Templar77400]

Résolu,

 

Il faut mettre la déclaration font-face dans global.css et non dans global.scss

Merci à dioniz sur le forum anglais

[Templar77400]

Bon en fait je reviens sur ce problème, car si je modifie directement le CSS dans global.css, dés que je modifie le global.scss, ça écrase ce que j'ai écrit dans le CSS.

Donc retour à la case départ, déclarer du code dans le css directement n'est pas une solution.

Si vous avez une idée de comment faire ...

[Templar77400]

Bump ^^

[Templar77400]

Je viens de trouver la solution, pour les prochains qui auraient des problèmes avec les polices, la voici :

 

Dans global.SCSS, tout en haut, inclure ces 2 lignes :

@import "compass/css3/font-face";
@include font-face("customFont", font-files('myfont.ttf', 'myfont.eot','myfont.woff', 'myfont.svg', 'myfont.otf' )); 

Le "@include font-face" va permettre de générer une seule fois un font-face dans le global.CSS, contrairement à "@font-face", qui générera du code dans chacun des fichiers CSS utilisant la police.
 

Cela génère donc le code suivant dans global.CSS :

@font-face {
  font-family: "customFont";
  src: url('../font/myfont.ttf') format('truetype'), url('../font/myfont.eot') format('embedded-opentype'), url('../font/myfont.woff') format('woff'), url('../font/myfont.svg') format('svg'), url('../font/myfont') format('opentype'); }

C'est bien ce que l'on voulait.

ATTENTION cependant à bien vérifier votre config.rb car j'ai eu pas mal de soucis avec ça

Il faut bien s'assurer que cette ligne se trouve bien dans config.rb

relative_assets = true

Ceci permet d'avoir des chemins relatifs et non absolus. Si vous ne le mettez pas, vos url de font auront cette tête : "/font/myfont.eot" dans le global.css et ça ne fonctionnera pas.

 

Après modification de config.rb, ne pas oublier de faire un compass clean. (Régénération de tous vos .CSS)

En espérant que ça aide.

Templar

Edited July 25, 2014 by Templar77400 (see edit history)