Exploiter n'importe quelle police Bouton_activeExploiter n'importe quelle police Bouton_hoverExploiter n'importe quelle police Fb-hoverExploiter n'importe quelle police Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Exploiter n'importe quelle police EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Exploiter n'importe quelle police EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Exploiter n'importe quelle police EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Exploiter n'importe quelle police EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Exploiter n'importe quelle police EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Exploiter n'importe quelle police EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Exploiter n'importe quelle police EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Exploiter n'importe quelle police EmptyVen 03 Fév 2023, 17:22 par Krager

Le Deal du moment : -24%
PC Portable Gaming 15.6″ Medion Erazer Deputy ...
Voir le deal
759.99 €

Partagez
 

Exploiter n'importe quelle police

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Anoob'
Invité




Exploiter n'importe quelle police Empty

Exploiter n'importe quelle police


Informations générales

Description :
Grâce à Google Web Fonts il est possible d'exploiter n'importe quelle police parmi l'énorme collection proposée et mise à disposition. Ce n'est pas la seule technique, mais c'est la plus simple.

Démo :
Exemple de mise en pratique

Testé sur :
Tous les navigateurs

Crédits :
Proposé par Anoobnyme le 14/04/2012 et Chinelle le 24/11/2012
Approuvé par Espeon
Mise à jour :
Mise à jour le 29/11/2012 par Espeon

Le tutoriel


Google Web Fonts


Tout d'abord, Google Web Fonts est un service proposé par Google afin que vous puissiez utiliser les polices en toute simplicité. Il regroupe un tas de polices pour toute utilisation. Vous avez la possibilité soit de les télécharger, soit de les laisser hébergées chez Google et de vous en servir.

1ère étape : le site


Pour commencer, rendez-vous sur : Google Web Fonts.

Exploiter n'importe quelle police 81google-web-fonts-01

2ème étape : le choix


Le fonctionnement de ce site est assez intuitif. Vous aurez le loisir de scroller encore et encore, ou bien vous pourrez faire une recherche. Vous pouvez également filtrer vos recherches par types de polices.

Farfouillez un peu et trouvez-en une qui vous éblouit.

La bande fixée en bas résume les polices que vous avez choisies. Pour choisir une police, vous pouvez clickez sur "Add to collection" (le bouton avec un fond bleu à droite de chaque police). Vous pouvez ainsi ajouter plusieurs polices à votre collection et vous n'aurez au final besoin que d'un seul code que google va vous donner tout frais. Quand vous avez fini clickez sur "use" tout en bas à droite.

Vous arrivez sur une nouvelle page, vous allez configurer votre importation. Vous pouvez choisir les différents styles dont vous avez besoin et que vous désirez importer. Par exemple si vous avez besoin de cette police en gras et en italique... ou pas !

Exploiter n'importe quelle police 11google-web-fonts-02

Si vous descendez un peu, vous pouvez apercevoir... des codes !
Il s'agit des codes que vous pouvez utiliser en fonction de la méthode par laquelle vous souhaitez implémenter votre police (standard, via @import ou par javascript).

Exploiter n'importe quelle police 17google-web-fonts-03

Ne vous tracassez pas, nous allons choisir la méthode "Standard".

3ème étape : implémenter


Techniquement, vous êtes déjà sur l'onglet "Standard".

Copiez simplement le code qui correspond à un code HTML et conservez-le dans un bloc-note.
Cette balise <link> peut servir à lier à votre site ou forum toutes sortes de fichiers, en l'occurence ici une ou plusieurs polices. C'est aussi avec une balise link qu'on lie un fichier .css à un site. C'est donc cette balise qui va nous permettre d'intégrer le code dans votre forum.

Ce doit être quelque chose comme cela :
Code:
<link href='http://fonts.googleapis.com/css?family=XXX' rel='stylesheet' type='text/css'>

Descendez encore un peu sur votre page, nous trouvons un code CSS : copiez-le aussi et mettez-le sur votre bloc-note. Ce doit être un code comme cela :
Code:
font-family: 'XXX', serif;

Ne perdez rien surtout !
Nous allons désormais retourner sur votre forum pour mettre tout ceci en place.

Comme vous pouvez le constater, l'interface made-in-Google est sobre, simple et efficace.

De plus, Google Web Fonts vous accompagne vraiment pas à pas dans tout ce petit processus. N'hésitez pas à lire les exemples fournis et à suivre leurs indications si vous vous sentez perdus !


Sur votre forum


Le HTML, dans le template


Rendez-vous sur votre Panneau d'Administration, cliquez sur l'onglet Affichage puis dans le menu Templates » Général et cliquez sur overall_header pour l'éditer.

L'endroit où vous allez positionner votre balise link pourrait avoir un impact sur l'affichage de votre police. Si vous le mettez après l'insertion du lien vers votre feuille de style, votre police ne s'affichera pas forcément.

Repérez donc cette partie du code, tout au dessus du code :
Code:
<meta http-equiv="content-style-type" content="text/css" />

Et copiez en dessous de cette balise meta votre balise <link>, comme sur l'aperçu ci-dessous :
Exploiter n'importe quelle police 2google-web-fonts-04

Techniquement, il s'agit ni plus ni moins d'une feuille de style CSS qui définit l'emplacement et le nom de la police qui vous intéresse, que Google héberge pour vous à l'URL http://fonts.googleapis.com/css?family=XXX.

Validez et n'oubliez pas de publier votre template !

Je voudrais ajouter un petit bémol au fait d'ajouter beaucoup de polices: plus vous ajouterez de polices à votre balise, plus le téléchargement sera lourd lors de l'arrivée du membre sur le forum.

Essayez donc de vous en tenir à ce dont vous avez besoin. Et supprimez la balise qui contient la police dont vous n'avez plus besoin lorsque vous changez.


Le CSS, dans le CSS


Puis rendez-vous dans Affichage > Couleurs > Feuille de style CSS.
Il ne vous reste plus qu'à appliquer la police au sélecteur de votre choix... Moi j'ai décidé de l'appliquer à tous mes titres les plus importants <h1> par exemple :
Code:
h1 {
    font-family: 'XXX', serif;
}

Mais on aurait pu tout aussi bien appliquer la police à l'ensemble du forum :
Code:
body {
    font-family: 'XXX', serif;
}

Bref, c'est super-simple, super-efficace et vous n'avez rien de plus à faire qu'à utiliser la police hébergée avec les codes fournis par l'API Google.

Enregistrez vous avez fini !


Dernière édition par Mario le Jeu 23 Déc 2010, 05:19, édité 3 fois
MessageSujet: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyMer 17 Nov 2010, 08:20
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Exploiter n'importe quelle police Empty
FAQ


Q
Si je suis membre et que je n'ai pas accès au Panneau d'Administration ?

R
Merci Daemoon. Ca fonctionne également en procédant de la même façon si le HTML est activé. Il suffit de placer le code HTML dans le post et d'inclure le CSS de la manière suivante :
Code:
<link href='ADRESSE' rel='stylesheet' type='text/css' />
<div style="font-family: 'NOM-DE-LA-POLICE', cursive;">Mon texte tout joli</div>


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyMer 03 Aoû 2011, 09:07
Revenir en haut Aller en bas
http://cssmania.com
Anoobnyme
Anoobnyme
GOD OF COOKIES

Masculin Messages : 1445



Exploiter n'importe quelle police Empty
MAJ effectuée le : 14/04/2012
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyVen 13 Avr 2012, 17:21
Revenir en haut Aller en bas
http://www.css-actif.com/
Elendil
Elendil
{ Membre }
{ Membre }

Masculin Messages : 33



Exploiter n'importe quelle police Empty
Bonjour ! Et merci pour le partage !

Je tenais à ajouter que si l'on place ceci :
Code:
<link href='URLDEVOTREPOLICE' rel='stylesheet' type='text/css'>
Non pas dans la description, mais dans le bon template (celui du haut du forum il me semble, je viens de tester sur celui-ci et celui des corps des messages en même temps :$ ) cela fonctionne aussi, mais du coup, on n'est pas limité en nombre d'import de police et on peut en ajouter plusieurs... Bien sûr, il faut toujours ajouter le reste dans la feuille de style du CSS.

Je ne sais pas si je suis très clair dans ce que je raconte...

(Désolé si mon message ne correspond pas aux critères de réponses des tutoriels, je ne suis pas certain d'avoir procédé correctement...)
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyMar 17 Avr 2012, 07:06
Revenir en haut Aller en bas
Kaktus
Kaktus
{ Membre }
{ Membre }

Féminin Messages : 68



Exploiter n'importe quelle police Empty
Oui c'est ça, tu as parfaitement raison ! Smile Je me permets d'y apporter plus de précisions: Il s'agit du template overall_header. Il faut placer le code après la balise
Code:
<head>
et après faire le reste des manœuvres dans le CSS comme indiqué dans le tutoriel. En effet, cela permet d'être moins restreint car on peut en ajouter beaucoup plus !

Je pense que ça a tout à fait sa place ici car c'est une suggestion en soit pour ajouter quelques précisions sur le tutoriel. Wink [Bien que très utile pour les non-fondateurs !]
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyMar 17 Avr 2012, 10:41
Revenir en haut Aller en bas
http://fullhorsev2.great-forum.com/t5927-eillen-the-horses-wrote
Daemoon
Daemoon
{ Membre }
{ Membre }

Féminin Messages : 19



Exploiter n'importe quelle police Empty
Bonjour !
Je voudrais également ajouter une précision.
Il est également possible pour un membre qui n'a pas accès au panneau d'administration d'importer des polices avec le service Google Web Fonts. Pour cela il lui suffit de choisir la ou les polices qu'il souhaite importer. Il ne lui reste plus alors qu'à copier le code suivant dans un message (peu importe la position je pense).
Code:
<link href='ADRESSE' rel='stylesheet' type='text/css'>
Ensuite pour l'utiliser sur un texte il faut ensuite le code donné par Google Web Fonts (font-family) et de le coller dans le style d'un span ou d'un div.

Exemple:
Texte en Euphoria Script

Code:
<span style="font-family: 'Euphoria Script', cursive;">Texte en Euphoria Script</span>
<link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptySam 21 Avr 2012, 12:59
Revenir en haut Aller en bas
Kaktus
Kaktus
{ Membre }
{ Membre }

Féminin Messages : 68



Exploiter n'importe quelle police Empty
Par contre, je ne pense pas qu'importer une feuille CSS dans un message soit le bon plan, mais pourquoi pas. ^^
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptySam 21 Avr 2012, 14:12
Revenir en haut Aller en bas
http://hollywood-ramdam.lebonforum.com/
Kaileen
Kaileen
{ Membre }
{ Membre }

Féminin Messages : 103



Exploiter n'importe quelle police Empty
Merci pour le partage !
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyLun 28 Mai 2012, 03:28
Revenir en haut Aller en bas
HUNGRY HEART.
HUNGRY HEART.
{ Membre }
{ Membre }

Féminin Messages : 19



Exploiter n'importe quelle police Empty
C'est magnifique!!
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyJeu 31 Mai 2012, 16:48
Revenir en haut Aller en bas
Iezael
Iezael
{ Membre }
{ Membre }

Féminin Messages : 27



Exploiter n'importe quelle police Empty
Merci beaucoup pour le partage, c'est génial Very Happy
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyMer 13 Juin 2012, 06:23
Revenir en haut Aller en bas
http://tvd-rpg.forumgratuit.be/
ptit lu
ptit lu
{ Membre }
{ Membre }

Féminin Messages : 40



Exploiter n'importe quelle police Empty
merci ce code est génial
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptySam 14 Juil 2012, 05:38
Revenir en haut Aller en bas
https://twitter.com/Poynt_Her
Leettle
Leettle
{ Membre actif }
{ Membre actif }

Féminin Messages : 408



Exploiter n'importe quelle police Empty
merci Smile
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyDim 29 Juil 2012, 14:07
Revenir en haut Aller en bas
http://aller-retour.forumsactifs.com
Ithilien
Ithilien
{ Membre }
{ Membre }

Féminin Messages : 46



Exploiter n'importe quelle police Empty
Merci beaucoup !
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyMer 22 Aoû 2012, 19:05
Revenir en haut Aller en bas
Invité
Invité




Exploiter n'importe quelle police Empty
Bonjour

Merci pour ce tuto Smile
Mais moi ça ne fonctionne pas.
Je voudrais appliquer la police uniquement aux liens des forums sur la 1er page du forum.
Est ce pareil ?

Merci
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyMar 11 Sep 2012, 12:39
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Exploiter n'importe quelle police Empty
Bonjour !
Comme indiqué un peu partout : les tutoriels sont ouverts aux commentaires et aux suggestions seulement. En cas de problème, dirigez-vous vers l'Aide CSS & xHTML.
Merci de ta compréhension Exploiter n'importe quelle police 926145
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyMar 11 Sep 2012, 13:48
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Exploiter n'importe quelle police Empty
08-10-2012 - Tutoriel revu et mis à jour, remarques précédentes des membres intégrées au tutoriel
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyLun 08 Oct 2012, 10:13
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Exploiter n'importe quelle police Empty
30-11-2012 - Tutoriel revu et mis à jour avec la participation de Chinelle
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police EmptyVen 30 Nov 2012, 05:01
Revenir en haut Aller en bas
Contenu sponsorisé




Exploiter n'importe quelle police Empty
MessageSujet: Re: Exploiter n'importe quelle police   Exploiter n'importe quelle police Empty
Revenir en haut Aller en bas
 

Exploiter n'importe quelle police

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Exploiter n'importe quelle police (messages)
» Quelle police d'écriture ?
» Quelle est la police d'écriture de ce forum ?
» Police de texte
» police d'écriture

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Les Messages-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit