C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Vos partenaires dans le footer
Sam 10 Nov 2018, 09:39 par FredR

» Mettre votre © Copyright dans le footer de votre forum
Sam 10 Nov 2018, 09:25 par FredR

» Effet pour vos sous-forums
Sam 10 Nov 2018, 06:13 par FredR

» Pour faire des beaux titres de sous-forums
Sam 10 Nov 2018, 05:55 par FredR

» Bouton ''Sélectionner le contenu'', pour les codes
Sam 10 Nov 2018, 05:41 par FredR

» Modifier l'apparence du titre des topics
Sam 10 Nov 2018, 05:28 par FredR

» Début d'un sujet/Fond pour sujet important
Sam 10 Nov 2018, 02:45 par FredR

» Previsualiser le premier message d'un sujet
Ven 09 Nov 2018, 12:49 par FredR


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


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.



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 !



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).



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 :


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   Mer 17 Nov 2010, 08:20
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5576



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


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Exploiter n'importe quelle police   Mer 03 Aoû 2011, 09:07
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://cssmania.com
avatar
GOD OF COOKIES

Masculin Messages : 1445



MAJ effectuée le : 14/04/2012





MessageSujet: Re: Exploiter n'importe quelle police   Ven 13 Avr 2012, 17:21
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.css-actif.com/
avatar
{ Membre }
{ Membre }

Masculin Messages : 33



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   Mar 17 Avr 2012, 07:06
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 68



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   Mar 17 Avr 2012, 10:41
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fullhorsev2.forumotion.com/t5927-eillen-the-horses-wrote
avatar
{ Membre }
{ Membre }

Féminin Messages : 19



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   Sam 21 Avr 2012, 12:59
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 68



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   Sam 21 Avr 2012, 14:12
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hollywood-ramdam.lebonforum.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 103



Merci pour le partage !


Avatar : ©️ Design Touch.
MessageSujet: Re: Exploiter n'importe quelle police   Lun 28 Mai 2012, 03:28
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 19



C'est magnifique!!
MessageSujet: Re: Exploiter n'importe quelle police   Jeu 31 Mai 2012, 16:48
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 27



Merci beaucoup pour le partage, c'est génial Very Happy
MessageSujet: Re: Exploiter n'importe quelle police   Mer 13 Juin 2012, 06:23
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://tvd-rpg.forumgratuit.be/
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



merci ce code est génial
MessageSujet: Re: Exploiter n'importe quelle police   Sam 14 Juil 2012, 05:38
Revenir en haut Aller en bas
Voir le profil de l'utilisateur https://twitter.com/Poynt_Her
avatar
{ Membre actif }
{ Membre actif }

Féminin Messages : 408



merci Smile


"The world would be a lonely place without the one that puts a smile on your face."
MessageSujet: Re: Exploiter n'importe quelle police   Dim 29 Juil 2012, 14:07
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://aller-retour.forumsactifs.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 46



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




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   Mar 11 Sep 2012, 12:39
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Psychopathe
Psychopathe

Féminin Messages : 3407



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


MessageSujet: Re: Exploiter n'importe quelle police   Mar 11 Sep 2012, 13:48
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



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   Lun 08 Oct 2012, 10:13
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



30-11-2012 - Tutoriel revu et mis à jour avec la participation de Chinelle


MessageSujet: Re: Exploiter n'importe quelle police   Ven 30 Nov 2012, 05:01
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Exploiter n'importe quelle police   
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
» Quelle police d'écriture ?
» Les pages de mon forum sont trop larges peu importe la police
» Modif police et taille d'écriture
» Quelle partie de votre cerveau utilisez-vous ?

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 | Contact | Signaler un abus | Forum gratuit