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 :

en quelque chose de plus élégant comme:

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.

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

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

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:

Navigateurs supportés

Introduction

Dans ce didacticiel, nous installerons le template à l'aide de la fonctionnalité Télécharger du panneau de configuration de L’Administration Joomla.

Général

Sous la section Général, vous avez les paramètres suivants

• Préchargeur
• Retour au sommet
• Réglages de la mise en Page

La section en-tête contient votre logo, un méga-menu, un module de menu et un menu de canevas.

Désactiver l'en-tête désactiverait tous ces éléments.