De meilleures polices Web avec @font-face

Depuis CSS2 nous pouvons profiter de @font-face et utiliser des types de polices personnalisés dans nos applications Web. Plutôt que d'être limité aux polices web par défaut nous pouvons maintenant utiliser notre propre famille de police et styler le web comment nous le voulons. Avec la simple inclusion de quelques paramètres CSS, la magie se produit:

balisage:

 

@font-face {
font-family:'PacificoRegular';
src: url('Pacifico-webfont.eot');
src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('Pacifico-webfont.woff') format('woff'),
url('Pacifico-webfont.ttf') format('truetype'),
url('Pacifico-webfont.svg#PacificoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
font-family:'PacificoRegular',Arial, sans-serif;
}

 

 

Et vous pouvez transformer votre style de police depuis :

fontface1

en quelque chose de plus élégant comme:

fontface2

Utilisation des kits de polices FoontSquirrel @ dans les modèles basés sur YJSG

Comme vous pouvez le voir ci-dessus, le processus est simple mais au lieu de rechercher ou de créer des fichiers de polices Web, vous pouvez utiliser le service gratuit fourni par FoontSquirrel qui vous permettra de télécharger ou générer des kits @font-face et les utiliser tels quels dans votre template basé sur YJSG. Pour des fins de démonstration, veuillez aller à @font-face kit True Crimes cliquez sur @ font-face Kit au-dessus du spécimen et cliquez sur le gros bouton bleu qui dit Domwnoad @ font-face Kit.

fontface3

Si nous utilisons wamp nous allons télécharger le fichier zip dans le dossier site_racine/templates/yjsg_template_name/css/fontfacekits. Si vous le faites sur un serveur en direct, téléchargez le fichier zip, extrayez-le dans son propre dossier et téléchargez ce dossier sur le chemin mentionné ci-dessus. Pour votre commodité, le template YouGrids est livré avec le kit PTSansNarrowBold @ font-face:

fontface4

Dézippez le fichier True-Crimes-fontfacekit.zip et envoyez le dossier contenant les polices (chaque exemple peut être différent) :

fontface5

Accédez à votre gestionnaire de templates, nom de l'onglet Style et activez les paramètres suivants:

Utiliser la substitution de police de balises d'éléments réglé sur Oui

Type de substitution de la balise élément @font-face kit

À partir de @ font-face Kit Font-Family sélectionnez, choisissez votre nouveau dossier @ font-face kit qui, dans notre cas, est truecrimes_regular

 fontface6

Ajouter des déclarations de style personnalisées

Comme l'utilisation de @ font-face nécessite parfois de changer la taille de la police, le poids de la police ou d'autres attributs de police, nous avons désactivé Le paramètre Selecteurs concernés dans l'admin du template si vous sélectionnez @font-face kit en tant que type de substitution et vous devrez modifier vos déclarations dans
site_racine/templates/yjsg_template_name/css/fontfacekits/votre_font_face_kit/stylesheet.css file.

Assurez-vous que le fichier css de votre dossier @ font-face kit est toujours nommé stylesheet.css et que vous n'avez pas d'espace dans votre nom de dossier @font-face kit. 
Maintenant ouvrez le fichier stylsheet.css et ajoutez ce code pour changer la famille de police pour les en-têtes, le titre de l'article, le titre du module et le nom du composant:

 

h1,h2,h3,h4,h5,h6,.article_title,.module_title,.pagetitle
{
font-weight:normal!important;
font-family:'true_crimesregular', Arial, sans-serif;
}

 

 

 

votre rendu devrait être ceci:

exemple:fontface7

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels