Discussion :

[Diegomarck]

Bonjour,
je suis débutant dans le domaine et je n'arrive pas à coder une police personnalisée avec @font-face... dans l'exercice du cv.
Je ne trouve pas vraiment de police gratuite à télécharger et n'arrive pas à faire correspondre le code.
Pourriez-vous m'aidez ?
Merci

[Luzagale]

Je ne vois pas de quel cours tu parles. Tu pourrais nous mettre un lien ?

Il y a énormément de polices à télécharger sur Dafont
Ensuite pour le code, un exemple avec une police otf :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
@font-face {
 font-family: "Open Sans"; /* Nom de la police à utiliser */
 src: url("/fonts/OpenSans.otf") format("opentype"); /* Localisation de l'endroit où est la police, ici dans le dossier /fonts/ */
}

[Diegomarck]

Merci je vais réflechir un peu ça doit pas être sorcier!

[Invité]

Bonjour,

si tu avais pris la peine de faire une recherche avant, tu serais tombé sur :

• cette discussion.
• le glossaire CSS : I-A-2. Police personnalisée | @font-face

[Diegomarck]

Bonjour, j'ai essayé mais ça ne marche pas. J'ai téléchargé flashlight. Le dossier est sur mon bureau ainsi que les fichiers html et css que j'utilise. Voici mon code css, pour quoi ne marche-t-il pas?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
h2
{
	color: maroon;
}
h1{
	text-align: center;
}
body{
	background: url(green-leaf-176722_960_720.jpg) fixed;
}
@font-face {
  font-family: 'flashlight';
  src: url("flashlight/flashlight.otf") format('otf');
}

Auriez-vous une idée? Merci
PS: je crois que je n'ai pas la bonne technique pour poster mon code. Soyez indulgent , je suis nouveau sur le forum. Merci

[psychadelic]

Rien de mal à débuter.

d'ou sort cette police flashlight ?
elle n'existe pas sur fontsquirrel

[druzy]

@Diegomarck
Minute papillon.
Je vois dans ton css que tu déclares la police mais je ne te vois pas l'utiliser avec quelque chose du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
h1
{
    font-family: 'flashlight';
}

[psychadelic]

je n'arrive pas à coder une police personnalisée avec @font-face...

merci pour l'info ?
Ah la limite je compatis, créer une police n'est pas une mince affaire.

Je ne trouve pas vraiment de police gratuite à télécharger et n'arrive pas à faire correspondre le code.

faut chercher un peu plus => http://lmgtfy.com/?q=police+gratuite
mais bon, perso je vais sur https://www.fontsquirrel.com/

Pourriez-vous m'aidez ?

oui, mais pourquoi faire ?

[dominos]

Bonjour, de plus en plus de navigateurs proposent de nombreuses polices d'écritures natives, mais je n'ai pas testé sous iPhone, par exemple : Impact, Arial, etc. fonctionnent aujourd'hui sous la pluparts des navigateurs modernes et aussi IE 11 (Windows 7) ; et avant, ça s'appelle la préhistoire...

Sinon pour afficher une font-face différente, voici un code qui fonctionne sous IE11/Chrome/Safari/FF/Opéra :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<style>
@font-face {
    font-family: 'machine_a_ecrire';
	src: url('public/fonts/machine_a_ecrire.woff2') format('woff2'),
         url('public/fonts/machine_a_ecrire.woff') format('woff');
}
 
.mafont { font-family: machine_a_ecrire; }
</style>
 
<div class="mafont">du texte...</div>

Pour convertir une font aux différents formats, j'utile cet outil en ligne qui fonctionne très bien : https://font-converter.net/en
Et https://www.dafont.com/fr/ pour trouver des polices d'écritures libres de droits.

Bonne continuation.