AccueilConnexion
Derniers sujets
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur
Page 1 sur 1 • Partagez
- Splash
Milouzien
Splash le Sam 6 Oct 2018 - 7:50
Hi,
Rendez-vous sur ce site et choisissez la/les polices à installer : https://fonts.google.com
Ajoutons 2 polices supplémentaires au forum, sans modifier le Template, mais en utilisant des codes javascript
Les 2 polices ajoutées sont les polices Coiny et Wallpoet
Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript
Mettre ce code javascript Sur toutes les pages pour la première police :
Et ce code pour la seconde police :
Ensuite mettre ce nouveau code javascript Sur toutes les pages (ce code correspondra aux polices de l'éditeur) :
Cette partie du code sert à inscrire les 2 nouvelles polices :
Polices qu'il faut également ajouter à cette ligne (en fin de code) :
![[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Police10](https://i.servimg.com/u/f90/19/89/22/92/police10.jpg)
Et ainsi de suite pour chaque nouvelle police à ajouter
Si vous rencontrez un problème avec l'ajout des polices par javascript
Sélectionnez vos polices sur la page Google Fonts en cliquant sur le petit rond rouge "Select this font"
![[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Select10](https://i.servimg.com/u/f90/19/89/22/92/select10.png)
Une fois vos polices sélectionnées, vous verrez en bas de page ce rectangle noir :
![[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Select11](https://i.servimg.com/u/f90/19/89/22/92/select11.png)
Déployez le en cliquant sur le petit tiret blanc (sur la gauche) :
![[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Select12](https://i.servimg.com/u/f90/19/89/22/92/select12.png)
Copier le code qui se trouve après Embed Font, pour nos 2 polices c'est celui-ci :
Coller ce code dans le template overall_header (juste après la balise head) :
Panneau d'administration / Affichage / Templates / Général
Votre début de template ressemblera à ça :
Ensuite ajouter le code javascript pour l'ajout à l'éditeur :
A bientôt
Rendez-vous sur ce site et choisissez la/les polices à installer : https://fonts.google.com
Ajoutons 2 polices supplémentaires au forum, sans modifier le Template, mais en utilisant des codes javascript
Les 2 polices ajoutées sont les polices Coiny et Wallpoet
-Astuce des Forums Milouze14&Compagnie-
Pour toute information,merci de contacter un Membre du Staff | ![[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Staff10](https://i.servimg.com/u/f37/11/26/21/37/staff10.png) |
Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript
Mettre ce code javascript Sur toutes les pages pour la première police :
- Code:
WebFontConfig = {
google: { families: [ 'Coiny' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
Et ce code pour la seconde police :
- Code:
WebFontConfig = {
google: { families: [ 'Wallpoet' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
Ensuite mettre ce nouveau code javascript Sur toutes les pages (ce code correspondra aux polices de l'éditeur) :
- Code:
WebFontConfig = {
google: { families: [ 'Coiny','Wallpoet' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
$(function(){
if(!$["sceditor"]) return;
$.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Coiny, Wallpoet'
});
Cette partie du code sert à inscrire les 2 nouvelles polices :
- Code:
WebFontConfig = {
google: { families: [ 'Coiny','Wallpoet' ] }
};
Polices qu'il faut également ajouter à cette ligne (en fin de code) :
- Code:
$.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Coiny, Wallpoet';
Et ainsi de suite pour chaque nouvelle police à ajouter
Si vous rencontrez un problème avec l'ajout des polices par javascript
Sélectionnez vos polices sur la page Google Fonts en cliquant sur le petit rond rouge "Select this font"
Une fois vos polices sélectionnées, vous verrez en bas de page ce rectangle noir :
Déployez le en cliquant sur le petit tiret blanc (sur la gauche) :
Copier le code qui se trouve après Embed Font, pour nos 2 polices c'est celui-ci :
- Code:
<link href="https://fonts.googleapis.com/css?family=Coiny|Wallpoet" rel="stylesheet">
Coller ce code dans le template overall_header (juste après la balise head) :
Panneau d'administration / Affichage / Templates / Général
Votre début de template ressemblera à ça :
- Code:
<!DOCTYPE HTML>
<html lang="{L_LANG_HTML}">
<head>
<link href="https://fonts.googleapis.com/css?family=Coiny|Wallpoet" rel="stylesheet">
Ensuite ajouter le code javascript pour l'ajout à l'éditeur :
- Code:
WebFontConfig = {
google: { families: [ 'Coiny','Wallpoet' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
$(function(){
if(!$["sceditor"]) return;
$.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Coiny, Wallpoet'
});
| :u1677: |
Dernière édition par Splash le Sam 6 Oct 2018 - 21:21, édité 3 fois
- Lilas
Milouzien
Lilas le Sam 6 Oct 2018 - 13:52
Kikou Splash,
Je m'intéresse à ta petite astuce, aujourd'hui.
Bonne journée forum,
Je m'intéresse à ta petite astuce, aujourd'hui.
Bonne journée forum,
- Milouze14
Fondateur
Milouze14 le Dim 7 Oct 2018 - 6:50
- Invité
Invité
Invité le Ven 12 Oct 2018 - 3:12
Merci beaucoup !
- ThunderTB
Milouzien
ThunderTB le Mar 6 Nov 2018 - 5:26
Merci beaucoup !
- Kaeyla
Milouzien
Kaeyla le Sam 26 Jan 2019 - 21:14
Merci pour ce superbe partage 
- HeroxAquariophile
Milouzien
HeroxAquariophile le Jeu 28 Mar 2019 - 17:25
MERCI !
- Ptite_Perle
Milouzien
Ptite_Perle le Ven 29 Mar 2019 - 14:51
Merci
- xewupMilouzien
xewup le Sam 30 Mar 2019 - 10:53
Merci beaucoup
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
» *RESOLU*[AwesomeBB] Profils en onglets
» histoire du Jour sans fin
» Test d'intelligence des politiciens-(e) histoire blagounette
» Règlement de l'entraide Forumactif
» [AwesomeBB] Problème avec le tuto "AutoSuggestion" - Incompatible version AwesomeBB
» *RESOLU*[AwesomeBB] Barre de progression sur la page - AwesomeBB
» *RESOLU*[PhpBB2] Insérer la valeur d'un champ personnalisé dans une page HTML
» *CORBEILLE*[PhpBB2] Récupérer la valeur d'un input
» *RESOLU*[PhpBB3] Prévisualisation directe
» *RESOLU*[PhpBB2] l'image s'éclairci dans le codage
» *RESOLU*[PhpBB2] Vérifier valeur dans InArray (Jquery)
» *RESOLU*[PhpBB2] Récupérer valeur checkbox
» [Toutes versions] Utiliser les variables utilisateur/forum
» *RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody
» *RESOLU*[PhpBB3] Nombre de messages et membres su qeel
» *RESOLU*[PhpBB2] Prévisualisation en direct
» *RESOLU*[PhpBB2] La version web ne s'affiche pas sur "mon" IPAD.
» [AwesomeBB] Problème avec le tuto "AutoSuggestion" - Incompatible version AwesomeBB
» [Toutes versions]Remplacer les icônes de l'éditeur par des icônes FontAwesome