Un forum de discussions pour parler de tout et de rien, de vos études,de vos vacances,de vos loisirs et faire plein de connaissances
 

Partagez
 

 Utiliser Google font [Facile]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Utiliser Google font [Facile] Empty
Message Sujet: Utiliser Google font [Facile]   Utiliser Google font [Facile] EmptyLun 4 Juil - 22:58


UTILISER GOOGLE FONT


Alors je vous présente Google font, un site vraiment très pratique !
https://www.google.com/fonts

Sur ce site, vous pouvez trouvez plein de police différente et je vais vous montrer comment les utiliser !
Pour trouver une police à mon goût, je clique à droite sur les catégories que je veux ou que je ne veux pas !
Chaque police possède un rectangle et en bas de ce rectangle nous avons deux petites icones à côté de l'icone bleu "Add to collection" vous voyez ? Sur l'une des deux petites icones blanche, passez votre curseur dessus et cliquez sur le bouton "Quick-use"

Prenons celle là par exemple :
https://www.google.com/fonts#QuickUsePlace:quickUse

On prend le code qu'on nous propose :
Code:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

Pour utiliser ce code il faut fermer la balise :
Code:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>Exemple 1 : Pacifico </link>

Mais ça ne suffit pas ! Nous allons ouvrir une balise div (on peut aussi utiliser span, mais je trouve que div est plus pratique hihi) :
Code:
<div style="css"></div>
Dans le css, il faudra mettre le deuxième code que Google font nous propose, et c'est celui-ci :
Code:
<div style="font-family: 'Pacifico', cursive;"></div>
Ce qui nous donne :
Code:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'><div style="font-family: 'Pacifico', cursive;">Exemple 1 : Pacifico</div> </link>

Exemple 1 : Pacifico


Pour agrandir on utilise font-size :
Code:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'><div style="font-family: 'Pacifico', cursive;font-size:30px;">Exemple 1 : Pacifico</div> </link>
Exemple 1 : Pacifico


Pour changer de couleur on utilise color:#codecouleur
Code:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'><div style="font-family: 'Pacifico', cursive;font-size:30px;color:#CE3434;">Exemple 1 : Pacifico</div> </link>
Exemple 1 : Pacifico



Je vous poste d'autres exemples ! Utiliser Google font [Facile] 4159918501

Exemple 2 : Amatic


Exemple 3 : Permanent Marker


Pour trouver vos couleurs vous pouvez aller là :
http://html-color-codes.info/

Facile hein ? Petit récap de ce que vous avez appris :
font-size:XXpx
color:#XXXXXX
Et Google a fait le reste 8D



N'hésitez pas si vous avez des questions ! Utiliser Google font [Facile] 4159918501
Et montrez-moi vos oeuvres d'art hihi !
Un merci ne vous coûte rien et ça m'encouragerait à vous faire d'autres tuto facile :dino20:
A la prochaine  :pingoun:

PS : Si vous voulez l'utiliser dans un beau codage mais que vous ne savez pas coder, je vous propose d'aller là : http://ocean-home.forumactif.org/t244-codage-pour-les-nuls-1

TUTORIEL BY ARYA - NE PAS COPIER



Utiliser Google font [Facile] 29VnchE
Merci Nolwenn ♥
Utiliser Google font [Facile] Hl03vzZ
Revenir en haut Aller en bas
Lucyfer
Pingouin de Madagascar
Pingouin de Madagascar
Lucyfer
Messages : 235
Date d'inscription : 19/04/2016
Age : 18

Utiliser Google font [Facile] Empty
Message Sujet: Re: Utiliser Google font [Facile]   Utiliser Google font [Facile] EmptyMar 5 Juil - 8:55

Merci pour ce tuto il est génial! *va passer sa journée à changer des polices d'écritures*



Merci à Shakumiro pour le code!♥ ♥ ♥
Revenir en haut Aller en bas
Louve Ailée
Léviathan des Nymphes
Léviathan des Nymphes
Louve Ailée
Messages : 3655
Date d'inscription : 14/07/2015
Age : 23

Utiliser Google font [Facile] Empty
Message Sujet: Re: Utiliser Google font [Facile]   Utiliser Google font [Facile] EmptyMar 5 Juil - 18:00

Merci beaucoup pour le tuto :dino20:
Maintenant j'en veux un pour les effets de textes, genre quand ils changent de couleurs quand la souris passe dessus et tout :bavecoeur:


Mes récompenses:
 
Comment taguer mon pseudo ?:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Utiliser Google font [Facile] Empty
Message Sujet: Re: Utiliser Google font [Facile]   Utiliser Google font [Facile] EmptyMer 6 Juil - 20:36

De rien ! Je suis contente d'avoir été utile ! :dino20:

Pour une prochaine fois Louve Razz



Utiliser Google font [Facile] 29VnchE
Merci Nolwenn ♥
Utiliser Google font [Facile] Hl03vzZ
Revenir en haut Aller en bas
Shakumiro
Carpe Japonaise
Carpe Japonaise
Shakumiro
Messages : 89
Date d'inscription : 07/06/2016

Utiliser Google font [Facile] Empty
Message Sujet: Re: Utiliser Google font [Facile]   Utiliser Google font [Facile] EmptyJeu 7 Juil - 11:40

Très beau tuto qui va aider plus d'un :D.

La fermeture de la balise link n'est pas obligatoire voir vraiment pas nécessaire.




Merci à toi Lucy pour le kit <3
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Utiliser Google font [Facile] Empty
Message Sujet: Re: Utiliser Google font [Facile]   Utiliser Google font [Facile] EmptyMer 3 Aoû - 8:14

@Shakumiro Ah d'accord je ne savais pas D:



Utiliser Google font [Facile] 29VnchE
Merci Nolwenn ♥
Utiliser Google font [Facile] Hl03vzZ
Revenir en haut Aller en bas
Contenu sponsorisé



Utiliser Google font [Facile] Empty
Message Sujet: Re: Utiliser Google font [Facile]   Utiliser Google font [Facile] Empty

Revenir en haut Aller en bas
 
Utiliser Google font [Facile]
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ocean Home :: Our Homes :: Vos talents artistiques :: Codage :: Tutoriaux-