tutoriel joomla

Comment incorporer une police design sur un site html

Propriété CSS3

Lorsque vous créez votre site web en html, il est très frustrant de se résigner à utiliser une police ou fonte par défaut.
La règle @font-face CSS3 vient résoudre ce problème. Encore peu connue, mais j'en suis sûr, elle va être utilisée sur tous les sites dans quelques années.

Il suffit juste de charger la police de caractère sur votre serveur et de la définir dans vos fichiers css. Attention à bien respecter les droits d'auteurs pour les polices protégées.
Voici la syntaxe pour l'utiliser si vous mettez la police de caractère dans un dossier "fonts" à la racine de votre site Joomla:

@font-face {
font-family: "nomdevotrefonte";
src: url('../../../fonts/nomdevotrefonte.ttf');
}

Il vous faudra ajouter autant de fontes que de déclinaisons

@font-face {
font-family: "nomdevotrefonte";
font-weight: bold;
src: url('../../../fonts/nomdevotrefonte-bold.ttf');
}
 
@font-face {
font-family: "nomdevotrefonte";
font-weight: italic;
src: url('../../../fonts/nomdevotrefonte-italic.ttf');
}

Définissez maintenant vos css :

h1{
font-style: normal;
font-weight: bold;
font-family: "orange", Helvetica, Arial, sans-serif;
font-size:18px;
}

Aïe comme c'est bizard, ça ne fonctionne pas avec IE ?

@font-face {
font-family: "nomdevotrefonte";
src: url("../../../fonts/nomdevotrefonte.EOT");
}

Vous avez un projet de création de site internet, vous recherchez un prestataire, n'hésitez pas à nous contacter

découvrez nos création web