To main content

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 : *)
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 :
<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;
}
Comment utiliser les CSS
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é).
Fabriqué le
Tilda