Importer une police externe dans Tiddlywiki


#1

Salut à tous,

Je voudrais donner une touche originale aux titres header 1, par exemple (tout en helvetica ou autre, ça me semble trop formel!).

Cependant j’ignore comment intégrer une police externe et lui faire appel dans TW…Quelqu’un a-t-il déjà tenté la chose?

Merci par avance pour votre aide, peace!


Configurer une police web
#2

Bonsoir @Yan,

Tu peux le faire classiquement par appel d’une police externe hébergé par un service en ligne, où bien en intégrant la police dans ton TW. Donc ton cas c’est sans doute moins utile puisque le fichier n’est pas appelé à être nomade comme un TW habituel. Tu n’as donc sans doute pas besoin de cette option hors ligne.

Tu as peut-être vu mon guide que j’avais écris il y a quelques années, tu peux y trouver quelques infos :

https://sylvain.naud.in/public/TiddlyWiki/tiddlywiki-guide-fr-CCbysa.html#WebFont

Tu devras choisir une police dont la licence t’autorise à l’utilise à la redistribuer (une police sous licence libre donc de préférence).

Tu pourras voir que pour les titres H1 j’avais choisi la police leckerlioneregular.


#3

Ok, j’ai essayé d’installer une webfont en suivant ton guide (je l’avais pas vu même après recherche…)

Donc, le Tiddler CSS de Tiddlyoueb contient désormais:

@font-face {
    font-family: 'belligerent_madnessregular';
    src: url('belligerent-webfont.woff2') format('woff2'),
         url('belligerent-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

et dans $:/themes/tiddlywiki/punch/base je mets:

body.tc-body h1 {
font-family: 'belligerent_madnessregular';   /*{{$:/user/config!!font-family}}*/
font-size: {{$:/user/config!!font-size-h1}};
color: {{$:/user/config!!font-color-h1}};
text-align:center;
}

Mais pas de résultat…


#4

Oui mais où est cette font ? Tu l’as créé et importé en base64 dans un tiddler ?


#5

Où sinon il te faut téléverser sur ton serveur les fichiers, en prenant soin de faire correspondre les chemins d’accès.


#6

En fait, j’ignore comment “créer”…pour moi, créer une police, c’est faire du vectoriel! :slight_smile:

Bon, j’ai essayé autre chose:

Google font :arrow_right: Dans le tiddler $:/user/config/StyleMain :

<style>
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
</style> 

ou

    @font-face {
    font-family: 'Amatic SC', cursive;
    src: url('https://fonts.googleapis.com/css?family=Amatic+SC');
    font-weight: normal;
    font-style: normal;
   }
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> 

Puis dans un autre tiddler CSS:

body.tc-body h1 {
    font-family: 'Amatic SC', cursive;
	font-size: {{$:/user/config!!font-size-h1}};
	color: {{$:/user/config!!font-color-h1}};
text-align:center;
}

TOUJOURS RIEN…


#7

Bonjour @Yan

tu y es presque :wink: Tu peux utiliser ta fonction @import directement dans le tiddler CSS dans lequel tu définis ta règle.

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body.tc-body h1 {
    font-family: 'Amatic SC', cursive;
    font-size: {{$:/user/config!!font-size-h1}};
    color: {{$:/user/config!!font-color-h1}};
    text-align:center;
}

je viens de l’essayer sur tiddlywiki.com et ça marche. Il faut bien sûr que ton tiddler soit taggé avec $:/tags/Stylesheet.

@sycom


#8

Hé bien…ça ne fonctionne pas o_O


#9

On dirait bien que tu as fini par réussir :wink:

Pour résumer il y a 3 possibilités :

  • utiliser un service en ligne tel Google Font (mais nécessite une connexion Internet)
  • utiliser une police que l’on téléverse sur son serveur (pour ne pas faire appel à Google justement et son côté indiscret pour les utilisateurs)
  • convertir une police en base64 pour l’importer en tant que tiddler (comme FontAwesome par exemple) et ainsi pouvoir avoir un TW portable hors ligne.