Comment installer une Google font ou font perso ?

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.3

Modérateur : Équipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !
Avatar du membre
Auteur
Lio4100
Posteur néophyte
Posteur néophyte
Messages : 9
Enregistré le : 08 déc. 2014 à 21:10

Comment installer une Google font ou font perso ?

Message par Lio4100 »

Bonjour, bonsoir à tous,

Comment installer des Google fonts ou fonts perso de notre ordinateur ?

J'ai essayé en créant un fichier rsfont.css où j'y ai copié ceci :

Code : Tout sélectionner

@font-face {
    font-family: "BatmanForeverAlternate", "BatmanForeverOutline";
    src: url("{T_THEME_PATH}/fonts/batmfalt.ttf") format("truetype"),
           url("{T_THEME_PATH}/fonts/batmfout.ttf") format("truetype");
   }
@font-face {
    font-family: "Astounder Squared BB";
    src: url("{T_THEME_PATH}/fonts/astounder.ttf") format("truetype");
   }
@font-face {
    font-family: "MangaMasterBB";
    src: url("{T_THEME_PATH}/fonts/MangaMasterBB.ttf") format("truetype");
   }

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700;900&display=swap');
Et aussi copié ce code dans le stylesheet.css :

Code : Tout sélectionner

@import url("rsfonts.css?v=prosilverdark113");
Mais ça ne fonctionne pas... :(

J'utilise le thème "Prosilver Dark Edition" pour info, et je le modif en local. ;)

Merci d'avance pour votre aide.
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4079
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Comment installer une Google font ou font perso ?

Message par Mazeltof »

'jour ici

Avant toute chose, si ce n'est déjà fait, je te suggère d'utiliser un style hérité afin d'y ajouter toutes tes modifications, ensuite, tu dois être absolument sûr que toutes ces polices de caractères sont libre d'utilisation.

pour les polices de carateres locales, essaie quelque chose comme ça (je n'ai pas testé) :
a mettre dans ta feuille de style préférée

Code : Tout sélectionner

@font-face {
    font-family: "BatmanForeverAlternate";
    src: url("fonts/batmfalt.ttf") format("truetype");
   }
@font-face {
    font-family: "BatmanForeverOutline";
    src: url("fonts/batmfout.ttf") format("truetype");
   }
@font-face {
    font-family: "Astounder Squared BB";
    src: url("fonts/astounder.ttf") format("truetype");
   }
@font-face {
    font-family: "MangaMasterBB";
    src: url("fonts/MangaMasterBB.ttf") format("truetype");
   }
puis pour l'utilisation, par exemple :

Code : Tout sélectionner

.uneclasse {
	font-family: "BatmanForeverOutline", Arial, Sans-serif;
}
pour la police gogole, je ne connais pas l'import via le css, je testerai a l'occasion mais via le html tu peux essayer quelquechose comme ça (je n'ai pas testé non plus) :
a mettre dans le fichier overall_header.html entre les balises head

Code : Tout sélectionner

<link href='http://fonts.googleapis.com/css?family=Rajdhani' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
;)
Avatar du membre
Auteur
Lio4100
Posteur néophyte
Posteur néophyte
Messages : 9
Enregistré le : 08 déc. 2014 à 21:10

Comment installer une Google font ou font perso ?

Message par Lio4100 »

Bonjour,

Merci pour votre réponse, mon style est hérité de prosilver, pour les polices oui je bougerais celles qui pose soucis c'était plus pour le test.

Pour mon soucis, j'ai essayé votre méthode mais ça ne fonctionne toujours pas. :cry:

J'ai plus d'idée, je ne savais pas que c'était si compliqué d'installer une font...
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4079
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Comment installer une Google font ou font perso ?

Message par Mazeltof »

'lut ici
Lio4100 a écrit :
14 oct. 2021 à 13:16
mon style est hérité de prosilver
Tu veux dire ton style personnel ou prosilver dark ? ce n'est pas la même chose, surtout si tu appliques quelques dizaines de modifications. Tu t'en rendras vite compte lors des mises a jour a venir.
Dans mon message précédent je voulais dire un style hérité de prosilver dark. si tu ne sais pas dis moi je te préparerai quelque chose a l'occasion ;)
Lio4100 a écrit :
14 oct. 2021 à 13:16
je ne savais pas que c'était si compliqué d'installer une font
Ce n'est pas si compliqué que ça, tu devrais essayer d'en installer une seule et voir? et quand c'est ok tu répètes l'opération pour une autre, etc.

puisque tu ne fournis pas de lien pour tes polices on va commencer par exemple avec la font locale et gratuite star jedi equivalent de la police de caractère star wars.

Pour le moment tu peux mettre tes modifications a la fin de la feuille de style dark.css (en attendant que tu aies un style personnalisé).
  • Télécharge l'archive de la font liée ci-dessus et décompresse l'archive.
  • Crée un répertoire prosilver_dark/theme/fonts
  • Copie le fichier star_jedi/starjedi/Starjedi.ttf dans le répertoire prosilver_dark/theme/fonts/
  • Dans le fichier prosilver_dark/theme/dark.css
    trouve (vers ligne229) :

    Code : Tout sélectionner

    	animation: UnreadPulse 1.4s infinite;
    	color: #FFF;
    }
    ajoute après :

    Code : Tout sélectionner

    @font-face {
        font-family: 'Starjedi';
        src: url('fonts/Starjedi.ttf') format('truetype');
    }
    note que le nom de la font (font-family) et le nom du fichier de la font (.ttf) sont identiques, mais il peuvent être différents.

    Pour l'exemple on va essayer la nouvelle police sur les titres de forums et titres de sujets, soit h2
    ajoute à la suite :

    Code : Tout sélectionner

    h2 {
        font-family: "Starjedi", Arial, Sans-serif;
    }
c'est tout, les titres de tes forums et sujets utilisent maintenant la police starjedi ;)
Avatar du membre
Auteur
Lio4100
Posteur néophyte
Posteur néophyte
Messages : 9
Enregistré le : 08 déc. 2014 à 21:10

Comment installer une Google font ou font perso ?

Message par Lio4100 »

Je parlais de ceci du faite d'hériter du prosilver :
Image

En faite, oui je pense que je ne procède pas bien.
Car je n'ai pas de style personnel, je travail directement sur les css du thème.

La police perso que j'utilise est "Batman Forever" disponible ici, et pour les 2 polices google, il s'agit de Roboto et de Rajdhani.

J'ai essayé votre exemple et il a marché par contre j'ai dû aller modif le h2 dans le common.css. (Sûrement dû au faite que je n'utilise pas un style perso ?)
Image

Reste mon problème des google fonts. :?
Peut-être télécharger les fonts et répéter la même opération que plus haut...

Merci ;)
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4079
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Comment installer une Google font ou font perso ?

Message par Mazeltof »

Lio4100 a écrit :
14 oct. 2021 à 16:19
par contre j'ai dû aller modif le h2 dans le common.css. (Sûrement dû au faite que je n'utilise pas un style perso ?)
j'en doute, la feuille de style dark.css est la dernière chargée pour le style prosilver_dark donc si comme indiqué tu copies en bas de cette feuille ça doit fonctionner. Bien entendu c'est a titre d'exemple et d'autres h2 sont présents dans le style, je n'ai pas fait le détail.
Si tu veux utiliser un style personalisé hérité de prosilver_black il ne faut, en aucun cas, modifier les fichier existant de ce style ni ceux de prosilver. c'est la regle.
Lio4100 a écrit :
14 oct. 2021 à 16:19
Reste mon problème des google fonts.
j'essaie de me pencher sur l'import dans le css rapidement ;)
Avatar du membre
Auteur
Lio4100
Posteur néophyte
Posteur néophyte
Messages : 9
Enregistré le : 08 déc. 2014 à 21:10

Comment installer une Google font ou font perso ?

Message par Lio4100 »

Mazeltof a écrit :
14 oct. 2021 à 18:15

Si tu veux utiliser un style personalisé hérité de prosilver_black il ne faut, en aucun cas, modifier les fichier existant de ce style ni ceux de prosilver. c'est la regle.
Ah ok, alors il faudrait du coup que je me penche sur comment faire mon style perso à partir d'un skin... :?
Mais ça ne fait plus partie de cette demande support.
Mazeltof a écrit :
14 oct. 2021 à 18:15
Lio4100 a écrit :
14 oct. 2021 à 16:19
Reste mon problème des google fonts.
j'essaie de me pencher sur l'import dans le css rapidement ;)
Merci ;)
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4079
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Comment installer une Google font ou font perso ?

Message par Mazeltof »

'jour ici

De ce que j'en ai lu, l'import de polices d'écriture dans le css est plutôt déconseillé, même si ça fonctionne.
A mon sens si tu utilises un style personnalisé, soit tu reprends une stylesheet.css pour toutes les règles d'import, soit tu devrais mettre l'import en haut de ta feuille de style personnalisée.
Dans le premier cas tu ne ferais que ralentir le chargement de ton site et dans le deuxième ... il n'est pas conseillé d'utiliser les deux règles @import et règles CSS régulières dans le même fichier.

bref je pencherai plutôt pour l'import dans le html
par exemple :
dans ton fichier overall_header.html ajoute entre les balises <head></head> :

Code : Tout sélectionner

<link href='http://fonts.googleapis.com/css?family=Rajdhani' rel='stylesheet' type='text/css'>
pour l'utilisation, par exemple :

Code : Tout sélectionner

.uneclasse {
	font-family: "Rajdhani", Arial, Sans-serif;
}
Lio4100 a écrit :
14 oct. 2021 à 18:42
Ah ok, alors il faudrait du coup que je me penche sur comment faire mon style perso à partir d'un skin... :?
il existe une documentation a cet effet, elle est pour phpBB 3.1 & 3.2 mais également d'actualité pour 3.3
Lio4100 a écrit :
14 oct. 2021 à 18:42
Mais ça ne fait plus partie de cette demande support.
C'est juste si, ça te semble trop complexe, ou un autre sujet ;)
Avatar du membre
Sylveretour
Floodeur mature
Floodeur mature
Messages : 1788
Enregistré le : 21 nov. 2017 à 18:24
Localisation : West Coast
Contact :

Comment installer une Google font ou font perso ?

Message par Sylveretour »

Bonjour,

Mazeltof est bien sur la bonne voie 8)

premièrement, les polices google sont ici -> https://fonts.google.com
Voici les bons liens d'intégration de fonts google dans la partie head avant {$STYLESHEETS} :

Code : Tout sélectionner

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani&family=Roboto&display=swap" rel="stylesheet">
Procéder ainsi permet de ne pas interrompre le chargement de la page en attendant la réponse, cela est important pour la rapidité et la fluidité.
Puis, les nouvelles polices sont utilisables dans le css car déjà importées en amont.
Par contre, le nom de la police dans le css doit être entre des guillemets :

Code : Tout sélectionner

font-family: 'Rajdhani', georgia, times New Roman;
Avatar du membre
Auteur
Lio4100
Posteur néophyte
Posteur néophyte
Messages : 9
Enregistré le : 08 déc. 2014 à 21:10

Comment installer une Google font ou font perso ?

Message par Lio4100 »

Bonjour, bonsoir,
Sylveretour a écrit :
16 oct. 2021 à 18:59
Bonjour,

Mazeltof est bien sur la bonne voie 8)

premièrement, les polices google sont ici -> https://fonts.google.com
Voici les bons liens d'intégration de fonts google dans la partie head avant {$STYLESHEETS} :

Code : Tout sélectionner

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani&family=Roboto&display=swap" rel="stylesheet">
Procéder ainsi permet de ne pas interrompre le chargement de la page en attendant la réponse, cela est important pour la rapidité et la fluidité.
Puis, les nouvelles polices sont utilisables dans le css car déjà importées en amont.
Par contre, le nom de la police dans le css doit être entre des guillemets :

Code : Tout sélectionner

font-family: 'Rajdhani', georgia, times New Roman;
Je viens de tester cette solution et elle ne fonctionne toujours pas...

Pourtant j'ai mis dans la partie overall_header.html entre les balises <head></head> :
Image

Ainsi que dans le css :
Image

Mais rien...
Image
Mazeltof a écrit :'jour ici

De ce que j'en ai lu, l'import de polices d'écriture dans le css est plutôt déconseillé, même si ça fonctionne.
A mon sens si tu utilises un style personnalisé, soit tu reprends une stylesheet.css pour toutes les règles d'import, soit tu devrais mettre l'import en haut de ta feuille de style personnalisée.
Dans le premier cas tu ne ferais que ralentir le chargement de ton site et dans le deuxième ... il n'est pas conseillé d'utiliser les deux règles @import et règles CSS régulières dans le même fichier.

bref je pencherai plutôt pour l'import dans le html
Pourtant cette solution fonctionnait mieux. :?
Mazeltof a écrit :il existe une documentation a cet effet, elle est pour phpBB 3.1 & 3.2 mais également d'actualité pour 3.3
Oui je me suis un peu plus penché sur le sujet, je regardais ce sujet-ci, mais celui que tu m'as donné à l'air plus complet... ;)
Mazeltof a écrit :C'est juste si, ça te semble trop complexe, ou un autre sujet ;)
Oui je pense que c'est ce que je vais faire, car j'ai bcp de questions, si je crée un nouveau sujet, je peux y poser plusieurs questions dedans ou je dois à chaque fois ouvrir un sujet ?

Merci à vous 8)
Avatar du membre
Sylveretour
Floodeur mature
Floodeur mature
Messages : 1788
Enregistré le : 21 nov. 2017 à 18:24
Localisation : West Coast
Contact :

Comment installer une Google font ou font perso ?

Message par Sylveretour »

J'ai testé auparavant ce que je te donne et j’affirme que cela fonctionne.
Il faut vider le cache du forum afin de faire prendre en compte les modifications.

Puis, donne l'url de ton forum avec les modifications faites que l'on puisse constater.
Avatar du membre
Auteur
Lio4100
Posteur néophyte
Posteur néophyte
Messages : 9
Enregistré le : 08 déc. 2014 à 21:10

Comment installer une Google font ou font perso ?

Message par Lio4100 »

Sylveretour a écrit :
16 oct. 2021 à 22:01
J'ai testé auparavant ce que je te donne et j’affirme que cela fonctionne.
Il faut vider le cache du forum afin de faire prendre en compte les modifications.

Puis, donne l'url de ton forum avec les modifications faites que l'on puisse constater.
Super ça fonctionne ! :D
Effectivement je n'avais pas vider le cache... :?

Je travaille le design en local ;)

Par contre si l'import via le CSS c'est pas top, comment importer une custom font ? (de notre pc)
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4079
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Comment installer une Google font ou font perso ?

Message par Mazeltof »

'jour ici
Lio4100 a écrit :
16 oct. 2021 à 21:02
Pourtant cette solution fonctionnait mieux
Je ne dirai pas ça, elle est plus facile, plus simple a mettre en place mais elle ne fonctionne pas mieux.
Lio4100 a écrit :
16 oct. 2021 à 21:02
Oui je me suis un peu plus penché sur le sujet, je regardais ce sujet-ci, mais celui que tu m'as donné à l'air plus complet
La documentation que je te propose plus haut concerne tous les styles alors que celle que tu indiques concerne uniquement prosilver.
Tu ne peux pas creer un style hérité de "prosilver dark" en utilisant le pack "style_perso_x.x.x.zip" a moins, bien sur, de le modifier en utilisant la documentation en question
Lio4100 a écrit :
17 oct. 2021 à 02:03
Par contre si l'import via le CSS c'est pas top, comment importer une custom font ? (de notre pc)
Je ne suis pas sur de comprendre ... tu as la solution plus haut non ?
Avatar du membre
Auteur
Lio4100
Posteur néophyte
Posteur néophyte
Messages : 9
Enregistré le : 08 déc. 2014 à 21:10

Comment installer une Google font ou font perso ?

Message par Lio4100 »

Ok, si j'ai bien compris, utiliser ta méthode pour la perso et celle de Sylveretour pour celle de Google... ;)
Mazeltof a écrit :
18 oct. 2021 à 08:55
Lio4100 a écrit :
16 oct. 2021 à 21:02
Oui je me suis un peu plus penché sur le sujet, je regardais ce sujet-ci, mais celui que tu m'as donné à l'air plus complet
La documentation que je te propose plus haut concerne tous les styles alors que celle que tu indiques concerne uniquement prosilver.
Tu ne peux pas creer un style hérité de "prosilver dark" en utilisant le pack "style_perso_x.x.x.zip" a moins, bien sur, de le modifier en utilisant la documentation en question
Yep j'ai un peu regarder les tutos en même temps, je suis tellement largué... Mais bon avec beaucoup de lecture et d'apprentissage je pense arriver à comprendre le truc... :mrgreen:
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 27112
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Comment installer une Google font ou font perso ?

Message par cabot »

Hello,

Utilise le format de police WOFF qui est adapté au Web, plutôt que TTF qui n'est pas compressé et donc très lourd.
Tu dois pouvoir diviser le poids par 3 en WOFF et par 4 en WOFF2 avec le générateur de Font Squirrel.
Répondre

Retourner vers « [3.3.x] Modifications et recherche de styles »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité