[Problème] Comment utiliser une police Google Fonts dans un template Rockettheme

[CEA_FRANCE]

Bonjour,
j'utilise un template Rockettheme dans lequel je vois la police que j'aimerais utiliser (lorsque je vais dans Styles/Font families, je trouve ma police) .
J'ai crée un module pour insérer du contenu texte.
Je pourrais aussi très bien entrer le texte directement via un Particles de type Simple Content
Comment faire pour saisir un mot dans une police particulière : dans mon cas j'aimerais utiliser la font family=Vampiro+One (c'est le nom que je récupère quand je vais dans Styles/Font)
et après, comment faire si je décide que c'est tout le Particles Simple Content que je veux mettre avec cette nouvelle police ?
Merci pour votre aide

[lomart]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

Bonjour,

On part du principe que la police est disponible sur ton site.
elle est chargée par : <link href="https://fonts.googleapis.com/css?family=Vampiro+One" rel="stylesheet">

Pour un mot, tu peux utiliser <span style="font-family: 'Vampiro One', cursive;">Mon mot en vampiro</span>

Le plus simple est de créer une classe wampiro : .vampiro {font-family: 'Vampiro One', cursive;}

pour faciliter l'utilisation pour un mot <span class="vampiro">Mon mot en vampiro</span>
ou pour un module en ajoutant la classe comme classe personnalisée dans ses paramètres

[CEA_FRANCE]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

Pour charger la police, il faut que je colle la ligne a quel endroit ?
si je la colle dans la zone de texte en me mettant au préalable en mode
Code source, cela ne fait rien...
Je vois bien la police Vampiro One sur la ligne que j'ai saisi avec votre procédure
<span style="font-family: 'Vampiro One', cursive;">Mon mot en vampiro</span>
mais sont aspect ne correspond pas a la police Vampiro One

[lomart]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

Pour charger la police, il faut que je colle la ligne a quel endroit ?

Normalement, elle est chargée par le template Rockettheme. Mais je ne connais pas leurs templates, donc à vérifier

[CEA_FRANCE]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

ça fonctionne pas...
Et si finalement elle n'était pas disponible sur le site: pouvez vous me décrire précisément comment il faut faire pour avoir les polices Google car sur le site google, j'ai rien compris...
Merci

[lomart]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

pouvez vous me décrire précisément comment il faut faire pour avoir les polices Google car sur le site google, j'ai rien compris...

Il faut insérer la ligne que j'ai indiqué dans le head du fichier index.php

<link href="https://fonts.googleapis.com/css?family=Vampiro+One" rel="stylesheet">

Par contre, avec Rockettheme, je ne sais pas comment faire

si c'est trop compliqué, il doit exister des extensions pour cela mais pas trouvé sur la GED
J'ai bien mon module lm-custom, mais il ne permet pas de créer une classe à réutiliser. Peut-être une idée à developper

[lomart]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

Peut-être une idée à développer

Il le fait déjà

[lomart]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

Il faut donc, une fois le module installé (https://lomart.fr/extensions/lm-custom)

1 - le publier en position débug pour ne pas le voir
2 - l'assigner à toutes les pages
3 - ajouter le code ci-dessous dans l'onglet "code"

<link href="https://fonts.googleapis.com/css?family=Vampiro+One" rel="stylesheet">

4 - ajouter ce code dans la zone "code CSS" de l'onglet "CSS"

.vampiro{font-family: 'Vampiro One', cursive;}

Testé, ça marche !!!

[lefabdu51]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

Il faut donc, une fois le module installé (https://lomart.fr/extensions/lm-custom)

1 - le publier en position débug pour ne pas le voir
2 - l'assigner à toutes les pages
3 - ajouter le code ci-dessous dans l'onglet "code"

<link href="https://fonts.googleapis.com/css?family=Vampiro+One" rel="stylesheet">

4 - ajouter ce code dans la zone "code CSS" de l'onglet "CSS"

.vampiro{font-family: 'Vampiro One', cursive;}

Testé, ça marche !!!

euhhhhhh ...... et si dans le fichier (au debut de celui ci) custom.css du template, tu mettait

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

et ceci à la fin :

.mf1 {font-family: 'Vampiro One', cursive;}

La classe .mf1 doit aussi etre crée dans le fichier editor.css du template pour pouvoir etre utilisée directement dans tinymce.....

Et au sein de ton article, tu séléctionnes ton texte, et tu cliques sur le bouton qui vas bien pour utiliser la classe mf1.... tu la verras ds la liste des classes disponibles....

[lomart]

Re : Comment utiliser une police Google Fonts dans un template Rockettheme

euhhhhhh oui, mais c'était une solution sans jouer avec les fichiers