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 du code CSS et votre propre serveur pour stocker le fichier.
La première chose dont vous avez besoin est le(s) fichier(s) de police 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.
Placez les fichiers de police sur le web
Vous pouvez choisir n'importe quel serveur ou service CDN pour placer les fichiers. L'essentiel est que le serveur prenne 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.
Placez les fichiers de police sur le web
Vous pouvez choisir n'importe quel serveur ou service CDN pour placer les fichiers. L'essentiel est que le serveur prenne 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 :
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>Créez votre propre fichier CSS et placez-le sur votre serveur ou sur un service CDN.
Comment créer un fichier CSS
Vous trouverez ci-dessous un exemple de la manière dont les feuilles de style CSS sont écrites. 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: bold;
}
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: bold;
}
Comment utiliser les CSS
The numbers 300,400... in the font-weight property indicate the weight of the font. Here is the complete list:
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
Retournez sur Tilda. Site Settings → Fonts and Colors → Your Own Font. Collez le lien vers le fichier CSS. Ajoutez le nom de la police tel que spécifié dans le fichier CSS.
Sauvegarder et republier toutes les pages.
Important : vous ne verrez votre police que lorsque vous publierez le site web. En mode édition ou prévisualisation, aucun fichier CSS tiers ne peut être connecté, ce qui signifie que votre police ne sera pas visible (pour des raisons de sécurité).
