Comment connecter des polices à l’aide du fichier CSS
La connexion de fichiers via votre propre CSS nécessite une expérience dans l'écriture de code CSS et votre propre serveur pour stocker le fichier.
La première chose dont vous avez besoin est un ou plusieurs fichiers de polices WOFF.
Vous pouvez les obtenir en achetant une police auprès d’un service de polices, par exemple, myfonts.com. Lors de l’achat, choisissez la licence « WEB » afin de pouvoir l’utiliser en ligne.
Placer des fichiers de polices sur le Web
Vous pouvez choisir n’importe quel serveur ou service CDN pour placer des fichiers. L’essentiel est que le serveur doit prendre en charge Access-Control-Allow-Origin CORS pour la distribution à n’importe quel domaine. (Access-Control-Allow-Origin: *)
Vous pouvez les obtenir en achetant une police auprès d’un service de polices, par exemple, myfonts.com. Lors de l’achat, choisissez la licence « WEB » afin de pouvoir l’utiliser en ligne.
Placer des fichiers de polices sur le Web
Vous pouvez choisir n’importe quel serveur ou service CDN pour placer des fichiers. L’essentiel est que le serveur doit prendre en charge Access-Control-Allow-Origin CORS pour la distribution à n’importe quel domaine. (Access-Control-Allow-Origin: *)
Si vous hébergez des fichiers sur votre propre serveur
Créez un fichier .htaccess à la racine du site Web et ajoutez le code suivant :
Créez un fichier .htaccess à la racine du site Web et ajoutez le code suivant :
Ensemble d’en-têtes Access-Control-Allow-Origin « * » Créez votre propre fichier CSS et placez-le sur votre serveur ou service CDN.
Comment créer un fichier CSS
Vous trouverez ci-dessous un exemple de la façon dont le CSS est écrit. Vous pouvez le créer dans un éditeur de texte ordinaire, l'enregistrer avec une extension .css, puis le télécharger sur un serveur ou un CDN.
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: gras;
}
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: gras;
}
Comment utiliser CSS
Les chiffres 300 400... dans la propriété font-weight, indiquez l’épaisseur de la police. Voici la liste complète :
100 - mince
200 - extra léger
300 - lumière
400 - normal
500 - moyen
600 - semi-gras
700 - gras
800 - extra gras
900 - noir
Les navigateurs sur le Web affichent les polices légèrement différemment de ce qu’elles pourraient paraître, par exemple, dans Photoshop. Ils sortent généralement un peu plus audacieux. Parfois, il est utile de connaître les petites astuces: vous pouvez spécifier, par exemple, un fichier léger pour obtenir un rendu de police Normal.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
Et vice versa. Si vous n’avez pas de fichier Semi-bold (600), spécifiez plutôt Gras. De cette façon, les titres semi-gras seront affichés en gras au lieu du style de corps de texte normal.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: gras;
}
Si vous n’avez qu’un seul fichier de police, vous pouvez le spécifier pour tous les styles, en les répertoriant séparés par des virgules : 300 400 500 600 700
100 - mince
200 - extra léger
300 - lumière
400 - normal
500 - moyen
600 - semi-gras
700 - gras
800 - extra gras
900 - noir
Les navigateurs sur le Web affichent les polices légèrement différemment de ce qu’elles pourraient paraître, par exemple, dans Photoshop. Ils sortent généralement un peu plus audacieux. Parfois, il est utile de connaître les petites astuces: vous pouvez spécifier, par exemple, un fichier léger pour obtenir un rendu de police Normal.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
Et vice versa. Si vous n’avez pas de fichier Semi-bold (600), spécifiez plutôt Gras. De cette façon, les titres semi-gras seront affichés en gras au lieu du style de corps de texte normal.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: gras;
}
Si vous n’avez qu’un seul fichier de police, vous pouvez le spécifier pour tous les styles, en les répertoriant séparés par des virgules : 300 400 500 600 700
Retournez voir Tilda. Les paramètres du site → les polices et les couleurs → votre propre police. Collez le lien vers le fichier CSS. Ajoutez le nom de la police tel qu’il est spécifié dans le fichier CSS.
Enregistrez et republiez toutes les pages.
Important : vous ne verrez votre police que lorsque vous publierez le site Web. En mode Édition ou Aperçu, aucun fichier CSS tiers ne peut être connecté, ce qui signifie que votre police ne sera pas visible (ceci est fait pour des raisons de sécurité).
