Yan
Décembre 17, 2017, 6:30
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!
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.
Yan
Décembre 17, 2017, 8:32
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…
Oui mais où est cette font ? Tu l’as créé et importé en base64 dans un tiddler ?
Où sinon il te faut téléverser sur ton serveur les fichiers, en prenant soin de faire correspondre les chemins d’accès.
Yan
Décembre 18, 2017, 11:28
6
En fait, j’ignore comment “créer”…pour moi, créer une police, c’est faire du vectoriel!
Bon, j’ai essayé autre chose:
Google font 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…
sycom
Décembre 18, 2017, 2:15
7
Bonjour @Yan
tu y es presque 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
1 « J'aime »
Yan
Décembre 18, 2017, 4:01
8
Hé bien…ça ne fonctionne pas o_O
On dirait bien que tu as fini par réussir
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.