Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Comment intégrer une police personnalisé à votre site ?
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="1899" data-source="post: 5689492" data-attributes="member: 146051"><p style="text-align: center"><img src="https://reality-gaming.fr/attachments/header-psd-png.65429/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Bonjour à tous [fa]fa-user[/fa],</p> <p style="text-align: center"></p> <p style="text-align: center">Aujourd'hui je vais vous apprendre à intégrer une police personnalisé à votre site, c'est à dire une police autre que Arial, <span style="font-family: 'Tahoma'">Tahoma</span>, <span style="font-family: 'Trebuchet MS'">Trebuchet MS</span> et les autres police installé de base.</p> <p style="text-align: center"></p> <p style="text-align: center"><img src="https://reality-gaming.fr/attachments/separateur-orange-png.65430/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Alors, pour ce faire, trouver une police hébergé sur internet et conçu pour internet, pour ma part je vais utiliser <strong>OpenSansCondensed</strong>, une police faite par<strong> <span style="color: #0059b3">g</span><span style="color: #ff0000">o</span><span style="color: #b3b300">o</span><span style="color: #0059b3">g</span><span style="color: #59b300">l</span><span style="color: #ff0000">e</span></strong> et hébergé sur les serveurs de google.</p> <p style="text-align: center">Cette police est notamment cette utilisé par <strong><span style="color: #006666">RealityGaming</span></strong>, et elle n'est pas du tout difficile de l'installer comme toute les autres polices <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center"></p> <p style="text-align: center">Pour trouver vos polices, allez sur google font par exemple : <a href="https://www.google.com/fonts#" target="_blank">https://www.google.com/fonts#</a></p> <p style="text-align: center"></p> <p style="text-align: center">~</p> <p style="text-align: center"></p> <p style="text-align: center">Dans votre balise <strong><head></strong> :</p> <p style="text-align: center"></p> <p style="text-align: left">[HTML]<!DOCTYPE html></p> <p style="text-align: left"><head></p> <p style="text-align: left"> <meta charset="utf-8"></p> <p style="text-align: left"> <title>Tutoriel</title></p> <p style="text-align: left"></head>[/HTML]</p> <p style="text-align: left"></p> <p style="text-align: center">Il va falloir intégrer le lien de la police dans la balise, à l'aide d'un code, le même pour rattacher un fichier .css au document html, c'est à dire :</p> <p style="text-align: center">[CODE] <link href=' ' rel='stylesheet' type='text/css'> [/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Entre la balise <strong>href</strong>, mettez y le lien de votre police, pour ma part cela me donne ceci :</p> <p style="text-align: center">[CODE]<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Et généralement, sur google font, vous avez directement la balise à intégrer dans votre <strong><head></strong></p> <p style="text-align: center"></p> <p style="text-align: center">Voici le code fini :</p><p>[HTML]<head></p><p> <meta charset="utf-8"></p><p> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'></p><p> <title>Tutoriel</title></p><p></head>[/HTML]</p><p></p><p style="text-align: center"><img src="https://reality-gaming.fr/attachments/separateur-orange-png.65430/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Et maintenant pour l'utiliser, allez dans votre fichier <strong>css </strong>et ajouter :</p> <p style="text-align: center">[CODE]font-family: 'Open Sans Condensed' sans-serif;[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Il faut l'ajouter à une <strong>class</strong>, tel que <strong>.titre</strong>, <strong>#titre</strong>, <strong>p</strong>, <strong>h3</strong> etc... <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite351" alt=";)" title="Clin d'oeil ;)" loading="lazy" data-shortname=";)" /></p> <p style="text-align: center"></p><p>[CODE].shop {</p><p> font-size: 24px;</p><p> text-align: center;</p><p> font-family: 'Open Sans Condensed' sans-serif;</p><p> text-shadow: 0px 0px 3px black;</p><p> margin-right: 50px;</p><p>}</p><p>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Tuto terminé, en espérant qu'il vous ai été utile <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></p></blockquote><p></p>
[QUOTE="1899, post: 5689492, member: 146051"] [CENTER][IMG]https://reality-gaming.fr/attachments/header-psd-png.65429/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925[/IMG] Bonjour à tous [fa]fa-user[/fa], Aujourd'hui je vais vous apprendre à intégrer une police personnalisé à votre site, c'est à dire une police autre que Arial, [FONT=Tahoma]Tahoma[/FONT], [FONT=Trebuchet MS]Trebuchet MS[/FONT] et les autres police installé de base. [IMG]https://reality-gaming.fr/attachments/separateur-orange-png.65430/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925[/IMG] Alors, pour ce faire, trouver une police hébergé sur internet et conçu pour internet, pour ma part je vais utiliser [B]OpenSansCondensed[/B], une police faite par[B] [COLOR=#0059b3]g[/COLOR][COLOR=#ff0000]o[/COLOR][COLOR=#b3b300]o[/COLOR][COLOR=#0059b3]g[/COLOR][COLOR=#59b300]l[/COLOR][COLOR=#ff0000]e[/COLOR][/B] et hébergé sur les serveurs de google. Cette police est notamment cette utilisé par [B][COLOR=#006666]RealityGaming[/COLOR][/B], et elle n'est pas du tout difficile de l'installer comme toute les autres polices :) Pour trouver vos polices, allez sur google font par exemple : [URL]https://www.google.com/fonts#[/URL] ~ Dans votre balise [B]<head>[/B] : [/CENTER] [LEFT][HTML]<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Tutoriel</title> </head>[/HTML] [/LEFT] [CENTER]Il va falloir intégrer le lien de la police dans la balise, à l'aide d'un code, le même pour rattacher un fichier .css au document html, c'est à dire : [CODE] <link href=' ' rel='stylesheet' type='text/css'> [/CODE] Entre la balise [B]href[/B], mettez y le lien de votre police, pour ma part cela me donne ceci : [CODE]<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>[/CODE] Et généralement, sur google font, vous avez directement la balise à intégrer dans votre [B]<head>[/B] Voici le code fini :[/CENTER] [HTML]<head> <meta charset="utf-8"> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'> <title>Tutoriel</title> </head>[/HTML] [CENTER][IMG]https://reality-gaming.fr/attachments/separateur-orange-png.65430/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925[/IMG] Et maintenant pour l'utiliser, allez dans votre fichier [B]css [/B]et ajouter : [CODE]font-family: 'Open Sans Condensed' sans-serif;[/CODE] Il faut l'ajouter à une [B]class[/B], tel que [B].titre[/B], [B]#titre[/B], [B]p[/B], [B]h3[/B] etc... ;) [/CENTER] [CODE].shop { font-size: 24px; text-align: center; font-family: 'Open Sans Condensed' sans-serif; text-shadow: 0px 0px 3px black; margin-right: 50px; } [/CODE] [CENTER] Tuto terminé, en espérant qu'il vous ai été utile :D[/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Comment intégrer une police personnalisé à votre site ?
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut