Ceux qui me connaissent savent à quel point j’affectionne Linux Libertine , police que j’utilise de façon extensive, notamment sur ce site web. Malheureusement, en raison de soucis de licence (« Linux » est une marque déposée dont l’utilisation est soumise à l’autorisation de la Linux Foundation), elle n’est toujours pas disponible sur Google Fonts.

Le projet Linux Libertine fournit des webfonts (au format WOFF) qui peuvent être utilisées telles quelles. Cependant ces fichiers comportent l’ensemble de la table de caractères Unicode, incluant les langues anciennes (Égyptien, Copte, Hébreu, etc.) et pèsent donc entre 155 et 515 ko, ce qui n’est pas très compatible avec une utilisation web (en chargeant la police Roman et Roman Bold, vous êtes déjà à 0,9 Mo…).

J’ai donc repris les fichiers OTF sources et avec l’excellent Font squirrel, je les ai dégraissé puis repackagés dans tous les formats compatibles web existants : WOFF, WOFF2, TTF, SVG, EOT. Les fichiers WOFF ne pèsent alors plus que 76 à 114 ko (réduction de 79 %), et les fichiers WOFF2 pèsent entre 28 et 108 ko (réduction de 82 %). De quoi charger toutes les variantes de la police sans états d’âme, puisque tout l’ensemble pèse 717 ko en WOFF2 (en sachant que le navigateur télécharge les polices requises à la demande, seulement si la page les utilise).

#Caractéristiques des fichiers de fontes

  • Tables unicodes intégrées :
    • Latin basique,
    • Latin-1 additionnel,
    • Ponctuation,
    • Monnaies.
  • Caractères intégrés :
    • exposants,
    • indices,
    • ligatures,
    • symboles mathématiques,
    • éléments typographiques,
    • accents,
    • ponctuation et ponctuation alternative,
    • monnaies,
    • petites majuscules,
    • styles alternatifs,
    • ornements typographiques, casseaux, dingbats,
    • caractères de l’espace privé.
  • Alphabets intégrés :
    • Latin
    • Grec
  • Langues supportées :
    • Albanais,
    • Basque,
    • Breton,
    • Chamorro,
    • Danois,
    • Hollandais,
    • Anglais,
    • Faroese,
    • Finlandais,
    • Français,
    • Frisian,
    • Galicien,
    • Allemand,
    • Grec,
    • Islandais,
    • Italien,
    • Malagasy,
    • Norvégien,
    • Portuguais,
    • Espagnol,
    • Suédois.
  • Note :
    • Le crénage n’a pas été modifié.

#Table des caractères

Voir la table des caractères intégrés

#Utilisation

  1. Téléchargez les fichiers de départ (et décompressez l’archive)
  2. Copiez le répertoire fonts  et le fichier import.css  dans le même répertoire (celui de votre thème WordPress par exemple),
  3. Importez les polices en appelant le fichier import.css  et en redéclarant les polices dans votre feuilles de style principale :
 1/* Importe la feuille de style */
 2@import url('/chemin_complet/import.css');
 3/* Ex : @import url('/wp-content/themes/votre_theme/import.css'); */
 4
 5/* Applique la police Linux Libertine à tout le texte */
 6body {font-family: 'Linux Libertine';}
 7
 8/* Applique la police Linux Libertine Mono au code source */
 9pre, code {font-family: 'Linux Libertine Mono';}
10
11/* Applique la police Linux Libertine Initials à la première lettre du premier paragraphe de chaque page */
12.post .post-content p:first-child:first-letter {
13	font-size: 58px;
14	font-family: 'Linux Libertine Initials';
15	font-weight: 400;
16	font-style: normal;
17	line-height: 58px;
18	margin: -1px 2px 0 -5px;
19	float: left;
20	text-transform: uppercase;
21	overflow: visible;
22}

#Notes

Le fichier import.css  est une amélioration de celui généré par Font Squirrel qui relie :

  • chaque graisse CSS à chaque variante de la fonte :
    • La variante display est liée à une valeur font-weight  de 300
    • La variante roman est liée à une valeur font-weight  de 400 (texte normal)
    • La variante semibold est liée à une valeur font-weight  de 500
    • La variante bold est liée à une valeur font-weight  de 700 (valeur bold par défaut : 700).
  • le nom de la police web avec celle de la police locale au cas où elle serait déjà installée sur le système (pour ne pas la recharger),
  • chaque fichier de fonte avec son format de fichier :
    • SVG : rétro-compatibilité avec Safari 4.1 et antérieurs
    • EOT : rétro-compatibilité avec IE 8 et antérieurs
    • TTF : rétro-compatibilité avec Android Browser 4.0 et antérieurs
    • WOFF : compatibilité avec :
      • Android Browser 4.4 et suivants
      • Safari 5.1 et suivants
      • IE 9 et suivants
      • Chrome 5 et suivants
      • Opera 11.5 et suivants
      • Firefox 3.6 et suivants
    • WOFF2 : compatibilité avec :
      • Chrome 36 et suivants,
      • Firefox 39 et suivants,
      • Opera 23 et suivants,
      • Android Browser 46 et suivants.

#Raffinements de la police Linux Libertine pour le web

Bonbons pour les yeux

#Ligatures automatiques

fl, fi, ffl, ffi, fb, fh, ffh, fj, fk, ft, ck, ch, tt

#Ligatures manuelles (désuettes)

st, , , , , , 

#Remplacement contextuel de caractères

Qu, Th

#Caractères alternatifs

K, , R, , J, , &, , , , , 

#Fractions

⅓, ⅔

#Petites majuscules

Petites Majuscules

#Mathématiques

F(x) = ∫₀⁹ f(x) d_x,_ σ = √∑(∂f/dx)², ∃ f(x, y) ∀ (x, y) ∈ ℝ² ⇒ ∇f = ∂f/∂_x_ + ∂f/∂_y_,

#Chiffres elzéviriens

1, 2, 3, 4, 5, 6, 7, 8, 9

#Chiffres romains

Ⅲ, Ⅷ, Ⅺ, Ⅻ

#Ornements

☉, ☙, , , ☞, ⁂

#Symboles

, , ♬, ☯, №, ,

#Variantes

#Display

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

#Roman

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

#Semibold

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

#Bold

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.