Intégrer une police à un thème Plone avec @font-face

Ce guide est testé avec:

• Plone 4.1.3

Prérequis

Convertissez les polices à intégrer vers les formats Web grâce au @font-face generator de Font Squirrel (choisissez le mode "optimal").

Mise en place

Préparation du thème

Placez-vous dans le dossier du produit thème (là où se trouvent les dossiers "profiles" et "browser").

Détectez le nom du produit:

PRODUCT_NAME="$(command grep -r '.various"' 'profiles.zcml' \
    | command sed -e 's/^[^"]*"//' -e 's/.various".*$//')"

Créez le dossier "browser/fonts" destiné à contenir les polices Web:

command mkdir --parent 'browser/fonts'

Déclarez le dossier "fonts" comme ressource:

command sed -i -e "/<\/configure>/i\\
  <browser:resourceDirectory\\
      name=\"${PRODUCT_NAME}.fonts\"\\
      directory=\"fonts\"\\
      layer=\".interfaces.IThemeSpecific\"\\
      />
" 'browser/configure.zcml'

Créez le fichier font-face.css destiné à contenir les règles @font-face:

command touch 'browser/stylesheets/font-face.css'

Intégrez le fichier font-face.css au thème en ne spécifiant pas le média:

command sed -i -e "/<\/object>/i\\
  <stylesheet title=\"\"\\
      id=\"++resource++${PRODUCT_NAME}.stylesheets/font-face.css\"\\
      media=\"\" rel=\"stylesheet\" rendering=\"link\"\\
      cacheable=\"True\" compression=\"safe\" cookable=\"True\"\\
      enabled=\"1\" expression=\"\"/>\\
" 'profiles/default/cssregistry.xml'

Intégration des polices Web

Décompressez le fichier zip créé par le service au @font-face generator de Font Squirrel.

Copiez les fichiers .ttf, .woff, .svg et .eof dans le dossier 'browser/fonts'.

Copiez le contenu du fichier stylesheet.css fourni par @font-face generator dans le fichier 'browser/stylesheets/font-face.css' du produit.

Ajustez les chemins des polices dans le fichier font-face.css:

command sed -i -e "s|url('\([^+]\)|url('++resource++${PRODUCT_NAME}.fonts/\1|g" \
    'browser/stylesheets/font-face.css'

Utilisation dans le thème

Modifiez le fichier "browser/stylesheets/main.css" pour intégrer le code d'utilisation de la police. Par exemple:

h1 {
  font-family: "SawasdeeBold", "Helvetica Neue",Arial,FreeSans,sans-serif;
  font-weight: normal;
}

Si la police ne s'affiche pas une fois le thème installé et l'instance Plone redémarré (pour prendre en compte la nouvelle ressource), vérifiez que le texte utilisant la police n'est ni gras, ni italique.

Remerciements

• Merci à Font Squirrel pour @font-face generator.