Ajouter une Font d'écriture sur Thème Tesla Pro?

Bonjour,

Je dois traduire un site en Lao (Laotien), malheureusement, pour les titres et les slogans la police Lao n’est pas reconnue ! Alors, que dans les zones de texte ça fonctionne…

Donc ma question est : Comment imposer une police au site qui pourrait fonctionner dans les titres, slogans, formulaires, etc, … Partout en somme !

Mon thème est “Tesla Pro”

Merci de votre aide.

Peut-être dans Source List Settings>code>onglet Head, ajouter la police souhaitée <link href='https://fonts.googleapis.com/css?family=NOM-de-la-Police&subset=latin,latin-ext' rel='stylesheet' type='text/css'>, par exemple ici une police de google pour des caractères latins.
mais il faudra probablement aussi ajouter dans l’onglet CSS,

h1#site_title, h2#site_slogan {
font-family:‘NOM-de-la-Police’, arial, sans-serif;
font-weight:400 ou autre chiffre selon police choisie;
}

Merci bien Anne, je viens de passer sur Fonts Google mais… Je dois trouver une police Lao.

En effet, les polices Khmer et Thaï sont proposées mais pas de font Lao ! Le Lao étant un mélange des deux, je dois faire le moins mauvais choix…

En tout cas, je retiens ce principe simple et efficace !

Merci encore

j’ai fait référence aux polices Google en ligne, mais il est possible de faire la même chose avec des polices (libres de droit ou achetées) que l’on télécharge sur son site dans un dossier (ici dans le dossier resources de RapidWeaver, sous-dossier webfontscrochetina).
dans le CSS on déclare la police -sous différents formats pour que l’affichage fonctionne bien dans tous les navigateurs- et on leur donne un nom ici “titre-crochetina”, par exemple :

@font-face{font-family:‘titre-crochetina’; src: url(’%resource(webfontscrochetina/typographica-webfont.eot)%’);}
@font-face{font-family:‘titre-crochetina’; src: url(’%resource(webfontscrochetina/typographica-webfont.ttf)%’);}
@font-face{font-family:‘titre-crochetina’; src: url(’%resource(webfontscrochetina/typographica-webfont.otf)%’);}

puis on ajoute que l’on veut qu’elle soit utilisée (ici dans h1 à h5)

h1, h2, h3, h4, h5 {
font-family:‘titre-crochetina’, cursive, sans-serif;
font-weight:400;
}

PS : j’ai trouvé ce site qui propose des polices lao : http://fr.fonts2u.com/saysettha-lao.police

@annebourdon Merci pour ce code qui m’a bien aidé… :wink:

A priori, on doit pouvoir le rédiger de manière plus concise (exemple) :

@font-face {
font-family:‘AbrilDisplay-Italic’;
src: url(‘%resource(fonts/abrildisplayitalic.otf)%’) format(‘opentype’),
url(‘%resource(fonts/abrildisplayitalic.ttf)%’) format(‘ttf’),
url(‘%resource(fonts/abrildisplayitalic.woff)%’) format(‘woff’),
url(‘%resource(fonts/abrildisplayitalic.woff2)%’) format(‘woff2’);
}

POUR LA PETITE HISTOIRE…
J’utilise le Stacks LetterPress de Joe Workman : très, très bon Stacks !..
Après avoir coller le Code dans l’onglet CSS (global) de mon site et saisi le nom de ma typo dans un nouveau Stacks LetterPress : Style –> Custom Definition –> AbrilDisplay-Regular
La typo n’était pas prise en compte !..

SOLUTION…
Quand on dépose un nouveau Stacks LetterPress dans sa page, ce dernier a des paramètres spécifiques qui rentrent en conflit quand on utilise un fonte personnelle : IL FAUT SUPPRIMER L’OPTION “WEIGHT –> BOLD” pour que la typo s’affiche correctement dans la page web !..

CONVERTISSEUR…
L’application (gratuite, mais bien trop grosse application [170 Mo !..]) Fontplop convertit efficacement les fichiers de typos .OTF ou .TTF en WOFF et WOFF2, avec en plus un fichier CSS qui donne le libellé du nom précis de la typo à utiliser pour l’invoquer dans le code… :wink:
Si vous connaissez une application qui fait le même job, mais beaucoup moins grosse… je suis preneur !..

[EDIT]
Voir le service en ligne onlinefontconverter.com beaucoup plus complet.

1 Like

En effet, c’est plus simple comme ça.
Merci.