Configurer une police web


#1

Une petite récap genre tuto concernant l’utilisation de polices de caractères externes ou embarquées. Ça peut toujours servir :grinning:. Dans un prochain post je vous soumettrai un problème lié que je n’arrive pas à résoudre :sleepy:

Basé sur le wiki de Sylvain https://sylvain.naud.in/public/TiddlyWiki/tiddlywiki-guide-fr-CCbysa.html#WebFont je récapitule ici en détail des procédures à suivre selon que l’on veuille utiliser une police externe ou embarquée.

Voir aussi le thread Importer une police externe dans Tiddlywiki sur ce forum.

1- Utiliser une police externe

Externe c’est à dire une police stockée sur votre disque dur ou sur votre serveur.

Reprenons l’exemple de sylvain avec la police Titilium Thin.

1.1- Télécharger le fichier OTF

On la récupère sur le site fontsquirrel.com, à l’adresse https://www.fontsquirrel.com/fonts/titillium

Dans un premier temps il faut télécharger le kit au format OTF. Vous disposez pource faire du bouton de téléchargement de la police “Download OTF”

image

Enregistrez le fichier Titillium.zip sur votre disque dur.

Dézipper le fichier pour obtenir son contenu dans le répertoire Titillium.

1.2- Utiliser le webfont generator de fontsquirrel

À l’adresse https://www.fontsquirrel.com/tools/webfont-generator Télécharger la police que vous avez choisie, ici la police Titillium-Light.otf qui se trouve dans le fichier dézippé Titilium de votre disque dur. Garder le bouton d’options sélectionné sur le générateur à Optimal

1.3- Obtenir la webfont

Il ne vous reste plus qu’à télécharger le kit en appuyant sur le bouton “Download your kit” et à enregistrer sur votre disque dur le fichier zippé “webfontkit-20171217-205303”.

Dézipper ce fichier. Le contenu du fichier est le suivant:

  • titillium-thin-demo.html est un fichier HTML standalone qui vous permet de voir à quoi votre police de caractère ressemble à différentes tailles.

  • stylesheet.css, contenant le code CSS d’appel de la police que l’on intégrera à tiddlywiki comme indiqué plus bas.

  • titillium-thin-webfont.woff et titillium-thin-webfont.woff2 qui sont les fichiers de police eux même.

1.4- Configurer TiddlyWiki

CSS

Recopiez le contenu du fichier stylesheet.css (Voir plus haut) et placez le dans votre Tiddler de personnalisation CSS.

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 17, 2017 */
@font-face {
font-family: 'titilliumthin';
src: url('titillium-thin-webfont.woff2') format('woff2'),
     url('titillium-thin-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

1.5- Control panel

Sylvain a tout dit ici:

Dans la configuration générale de votre TiddlyWiki (Control Panel), à l’onglet Apparence > Theme Tweaks ajoutez en premier votre nouvelle police dans Settings > Font family :

titilliumthin,

NB : en l’état il faudra joindre vos fichiers WebFont avec votre TiddlyWiki si vous souhaitez diffuser votre wiki (sur une clé USB par exemple).

2- Utiliser une police embarquée

Toujours sur le wiki de Sylvain Configurer une police web Je précise le tiddler “Embed a font”:

Ici, la police de cratères sera intégrée à TiddlyWiki, c’est à dire que vous n’aurez pas besoin de faire suivre les fichiers de la police si vous déplacez votre wiki.

Source :https://groups.google.com/forum/#!topic/TiddlyWiki/utsLmgHZAhM

2.1- Télécharger le fichier OTF

La procédure est la même que le point 1.1

2.2 - Utiliser le webfont generator de fontsquirrel

La procédure est la même que celle décrite au point 1.2, sauf que vous devez sélectionner le bouton d’options “Expert” Validez l’option CSS : “Base64 Encode”.

Procédez ensuite à l’enregistrement du fichier zip comme décrit au point 1.2

2.3- Obtenir la webfont

A la différence du point 1.3, le contenu du fichier stylesheet.css intègre la police de caractères elle même codé en base 64 qui est un format reconnu pat TiddlyWiki. Le fichier est donc plus gros, 70 KB, contre 1 KB précédémment mais tout y est intégré.

2.4- Configurer TiddlyWiki

La procédure diffère légèrement

Vous devez d’abord recopier tout le contenu du fichier stylesheet.css dans un nouveau tiddler que vous pouvez nomer $:/fonts/titilliumthin par exemple.

Taguez ce nouveau tiddler “$:/tags/Stylesheet” et modifiez le type de ce tiddler en “Plain text (text/plain)”.

Thats’it !


Choix d'une police de caractères sur un thème autre que le thème principal (vanilla) (Problème)