Incorporez la police Ubuntu sur n'importe quelle page Web

Réponses:

25

Il existe 2 méthodes avec lesquelles vous pouvez incorporer la police Ubuntu dans votre site Web - en utilisant le répertoire de polices Google (préféré) ou en utilisant la @font-facedéclaration CSS et en convertissant vos polices manuellement.

Utilisation de Google Webfonts

Vous pouvez désormais utiliser la police Ubuntu en tant que police Web Google. Cela rendra le processus beaucoup plus simple. La plupart du contenu de cette partie de la réponse provient de la réponse de sladen .

Pourquoi l'utilisation de l'API Google Font est-elle la méthode préférée?

L'utilisation de l'API Google Font est une excellente suggestion car elle permet aux polices Web de fonctionner automatiquement sur tous les navigateurs modernes sans avoir à se soucier des détails. L'utilisation de l'API de police signifie que les visiteurs verront toujours automatiquement la dernière version de la police.

Comment puis-je utiliser l'API Google Font?

Depuis le 21 décembre 2010, la famille de polices Ubuntu est désormais incluse et déployable à partir de l'API Google Font, visitez:

Vous pouvez lire la publication Google Web Font sur les actualités, puis:

  1. Ouvrez le répertoire des polices Google: page " Ubuntu - Utiliser cette police "

  2. Cochez la combinaison de poids et de styles parmi Regular, Italic, Bold et Bold-Italic dont vous avez besoin pour votre page Web.

    texte alternatif

  3. Si la valeur par défaut est incorrecte, sélectionnez la combinaison langue / script dont vous avez besoin: un site Web russe avec des exemples en anglais peut utiliser "cyrillique, latin".

    texte alternatif

  4. Ajoutez la <link>balise donnée entre <head> ... </head>dans votre page HTML ou modèles et ajoutez le code CSS approprié entre les <style> ... </style>balises dans votre <head>.

    Par exemple, si vous créez le site Web hybride russe / anglais et que vous souhaitez utiliser la police par défaut pour tout le texte, vous pouvez ajouter le code suivant entre vos <head>balises:

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>

Remarques :

"Latin" est le script dans lequel l'anglais et de nombreuses autres langues européennes et africaines sont écrits.

Le "sous-ensemble" optimise les fichiers de polices en n'envoyant que des caractères pour certaines langues, les polices font environ 44 Ko chacune. Le chiffre de 168 Ko affiché pour le moment concerne tous les 1 200+ glyphes en téléchargement de police Web unique, et la plupart ne sont pas nécessaires pour un seul site Web.

Les fichiers de polices Ubuntu sont automatiquement convertis au format correct pour différents navigateurs; en fonction de la marque et la version le format requis est WOFF, EOT,SVG ou TTF. La bonne combinaison de CSS est spécifique à chaque demande de page et résout comme par magie ce problème difficile.

Utilisation de @ font-face

Vous pouvez incorporer les polices Ubuntu en les convertissant aux polices WOFF . Vous pouvez ensuite les intégrer à l'aide de la déclaration CSS @ font-face. Les polices (fichiers .ttf) se trouvent dans/usr/share/fonts/truetype/ubuntu-font-family .

Par exemple, pour utiliser la police Ubuntu Regular, convertie en fichier WOFF, Ubuntu-R.woff, utilisez ce code CSS:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

De même pour Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu Italic:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Bold Italic:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Ceci est pris en charge par tous les navigateurs récents .

Considérations

N'oubliez pas que certains utilisateurs configurent leur navigateur pour utiliser un ensemble spécifique de polices et peuvent être ennuyés si des polices personnalisées sont utilisées. Lisez également la licence de police Ubuntu pour connaître les modalités exactes de distribution de la police.

dv3500ea
la source
@ DKuntz2 - c'est bien mieux; J'ai maintenant changé ma réponse.
dv3500ea
Je n'ai pas compris la nécessité de copier la réponse de sladen. Pourquoi ne pas simplement l'éditer?
papukaija
J'ai répondu à cette question longtemps avant sladen, décrivant la méthode @ font-face. C'était avant que la police ne soit ajoutée à l'API Google Font (qui est une meilleure méthode). J'ai ajouté seulement une courte note au début de ma réponse et sladen a répondu beaucoup plus complètement et avait une meilleure réponse pour utiliser la méthode google.
dv3500ea
1
Cependant, à ce moment-là, ma réponse a été acceptée et très appréciée et le résultat est que les gens peuvent penser qu'ils devraient utiliser la méthode @ font-face qui est moins préférable. sladen m'a contacté par e-mail à ce sujet et j'ai accepté de modifier ma réponse, en attribuant l'attribution requise par la licence Creative Commons de ce site.
dv3500ea
10

L'utilisation de l'API Google Font est une excellente suggestion car elle permet aux polices Web de fonctionner automatiquement sur tous les navigateurs modernes sans avoir à se soucier des détails. L'utilisation de l'API de police signifie que les visiteurs verront toujours automatiquement la dernière version de la police.

Depuis le 21 décembre 2010, la famille de polices Ubuntu est désormais incluse et déployable à partir de l'API Google Font, visitez:

Vous pouvez lire la publication Google Web Font sur les actualités, puis:

  1. Ouvrez le répertoire des polices Google: page " Ubuntu - Utiliser cette police "
  2. Cochez la combinaison de poids et de styles parmi Regular, Italic, Bold et Bold-Italic dont vous avez besoin pour votre page Web.
  3. Si la valeur par défaut est incorrecte, sélectionnez la combinaison langue / script dont vous avez besoin: un site Web russe avec des exemples en anglais peut utiliser "cyrillique, latin".
  4. Copiez et collez le deux lignes de CSS dans les sections <head> ... </head>et <style>...</style>de votre page HTML ou de vos modèles.

Remarques:

"Latin" est le script dans lequel l'anglais et de nombreuses autres langues européennes et africaines sont écrits.

Le "sous-ensemble" optimise les fichiers de polices en n'envoyant que des caractères pour certaines langues, les polices font environ 44 Ko chacune. Le chiffre de 168 Ko affiché pour le moment concerne tous les 1 200+ glyphes en téléchargement de police Web unique, et la plupart ne sont pas nécessaires pour un seul site Web.

Les fichiers de polices Ubuntu sont automatiquement convertis au format correct pour différents navigateurs; en fonction de la marque et la version le format requis est WOFF, EOT,SVG ou TTF. La bonne combinaison de CSS est spécifique à chaque demande de page et résout comme par magie ce problème difficile.

sladen
la source
8

Le rendu des polices côté serveur (ou peut-être un meilleur "rendu dynamique des polices") est un problème intéressant depuis assez longtemps.

Techniquement, il semble logique que pour qu'une machine affiche une police spécifique, elle doit déjà être installée localement.

D'un autre côté, la conception Web perd beaucoup en devant s'en tenir aux «polices Web» de base / bien connues.

CSS2.1 a apporté quelques améliorations en utilisant la déclaration de règle @ font-face .
Il n'est pas encore devenu un standard, mais il finira par arriver avec CSS3.

En plus de cela, il y a eu quelques méthodes alternatives, comme:

J'espère que les liens fournis vous donneront une meilleure idée de ce qui peut être fait ;-)

Pavlos G.
la source