Comment ajouter une police non standard à un site Web?

519

Existe-t-il un moyen d'ajouter une police personnalisée sur un site Web sans utiliser d'images, de Flash ou d'autres graphiques?

Par exemple, je travaillais sur un site Web de mariage et j'ai trouvé beaucoup de belles polices pour ce sujet. Mais je ne trouve pas la bonne façon d'ajouter cette police sur le serveur. Et comment puis-je inclure cette police avec CSS dans le HTML? Est-ce possible de se passer de graphiques?

html css fonts font-face vaske
la source
18
Depuis que cette question a été posée, elle @font-faceest devenue beaucoup plus largement prise en charge et est recommandée pour une utilisation générale. Vous devez simplement savoir qu'IE requiert des polices dans un format différent de celui des autres navigateurs. Voir stackoverflow.com/questions/2219916/is-font-face-usable-now
David Johnstone
10
Assurez-vous que vous avez le droit de distribuer la police!
Viet
2
Visitez typekit.com , ou pour le fontsquirrel.com
bjudson
1
connexes stackoverflow.com/questions/8050640/...
Adrien Soyez
3
www.fontsquirrel.com semble génial pour générer les fichiers de polices requis et créer une bonne syntaxe @fontface pare-balles (identique à la police recommandée fontspring.com/blog/fixing-ie9-font-face-problems )
Adrien Be

Réponses:

500

Cela pourrait être fait via CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Il est pris en charge pour tous les navigateurs habituels si vous utilisez des polices TrueType (TTF) ou le Web Open Font Format (WOFF).

hangy
la source
13
Internet Explorer et Firefox ne sont PAS basés sur Webkit, c'est donc une solution tout à fait inutile à mon avis.
Casper
58
Ce n'est pas inutile car c'est standard: plus vous l'implémentez, plus il sera probablement implémenté par les navigateurs. Cela ne signifie pas que vous ne devriez pas trouver une autre façon de compenser, mais l'utiliser comme complément me semble bon.
e-satis
8
Firefox 3.1 prend cependant en charge @ font-face.
Ms2ger
2
@brendanjerwin: version mise à jour de votre lien - brendanjerwin.com/development/web/2009/03/03/…
Matt Ball
60
Hé les gars, devinez quoi? C'est maintenant presque 2016! Il est désormais largement pris en charge! Yay! Heureux, j'ai trouvé cette réponse si tard. Haha.
jessica
121

Vous pouvez ajouter des polices via Google Web Fonts .

Techniquement, les polices sont hébergées chez Google et vous les liez dans l'en-tête HTML. Ensuite, vous pouvez les utiliser librement en CSS avec @font-face( lire à ce sujet ).

Par exemple:

Dans la <head>section:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Puis en CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

La solution semble assez fiable (même Smashing Magazine l'utilise pour un titre d'article. ). Il n'y a cependant pas autant de polices disponibles jusqu'à présent dans le répertoire de polices Google .

Michał Pękała
la source
1
En juillet 2014, google a étendu les polices et inclus des polices Google Noto qui prennent en charge la plupart des langues google.com/get/noto/# . Abobe a soutenu cette initiative de police ouverte prenant en charge toutes les langues blog.typekit.com/2014/07/15/introducing-source-han-sans
vsingh
il semble (les polices Web Google) ne prennent pas en charge les versions .eot et .woff et .svg des polices. il prend juste en charge la version .ttf des polices!
Mahdi Jazini
77

La voie à suivre consiste à utiliser la déclaration CSS @ font-face qui permet aux auteurs de spécifier des polices en ligne pour afficher le texte sur leurs pages Web. En permettant aux auteurs de fournir leurs propres polices, @ font-face élimine le besoin de dépendre du nombre limité de polices que les utilisateurs ont installées sur leurs ordinateurs.

Jetez un œil au tableau suivant:

entrez la description de l'image ici

Comme vous pouvez le voir, il existe plusieurs formats que vous devez connaître, principalement en raison de la compatibilité entre les navigateurs. Le scénario des appareils mobiles n'est pas très différent.

Solutions:

1 - Compatibilité totale avec le navigateur

C'est la méthode avec le support le plus profond possible en ce moment:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - La plupart du navigateur

Cependant, les choses évoluent fortement vers WOFF , vous pouvez donc probablement vous en sortir avec:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Seuls les derniers navigateurs

Ou même juste WOFF.
Vous l'utilisez ensuite comme ceci:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Références et lectures complémentaires:

C'est principalement ce que vous devez savoir sur la mise en œuvre de cette fonctionnalité. Si vous souhaitez en savoir plus sur le sujet, je vous encourage à consulter les ressources suivantes. La plupart de ce que je mets ici est extrait de ce qui suit

Javier Cadiz
la source
2
L'outil Font Squirrel extrêmement pratique peut générer le CSS nécessaire pour une prise en charge complète du navigateur. Il vous permet même de télécharger la police sous l'un de ces formats, de la convertir dans tous les autres formats et de les télécharger tous. C'est un épargnant de vie quand il s'agit de polices personnalisées.
Jacob Stamm
Qu'est - ce que svgFontNameveut dire? Dois-je le changer en mon nom de famille de polices ou le laisser tel quel?
Gherman
17

Si par police non standard, vous voulez dire une police personnalisée d'un format standard, voici comment je le fais, et cela fonctionne pour tous les navigateurs que j'ai vérifiés jusqu'à présent:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

vous aurez donc juste besoin des polices ttf et eot. Certains outils disponibles en ligne peuvent effectuer la conversion.

Mais si vous souhaitez joindre une police dans un format non standard (bitmaps, etc.), je ne peux pas vous aider.

BiAiB
la source
1
Exemple d'outil en ligne: kirsle.net/wizards/ttf2eot.cgi Exemple d'outil hors ligne: code.google.com/p/ttf2eot/wiki/Demo - il devrait également être possible d'utiliser des polices WOFF .
Wilf
11

J'ai trouvé que le moyen le plus simple d'avoir des polices non standard sur un site Web est d'utiliser sIFR

Cela implique l'utilisation d'un objet Flash qui contient la police, mais il se dégrade bien en texte / police standard si Flash n'est pas installé.

Le style est défini dans votre CSS et JavaScript configure le remplacement Flash de votre texte.

Modifier: (Je recommande toujours d'utiliser des images pour des polices non standard car sIFR ajoute du temps à un projet et peut nécessiter une maintenance).

Mat
la source
24
Quelle terrible idée! J'ai flash dans mon navigateur mais flashblock aussi. Sur ce site, mon navigateur affiche une horrible page défigurée. Flash doit rester quelque chose que vous utilisez pour les grandes animations ou les films. Trop de flash est très ennuyeux et visuel, mon mon ...
e-satis
2
@ e-satis: Comment ça? Personnellement, je ne remarque jamais la différence entre une page qui utilise sIFR et une autre qui ne le fait pas, à part les différences subtiles de rendu de texte. Je pense que c'est une excellente idée, honnêtement, bien qu'elle @font-facesoit beaucoup mieux soutenue.
Sasha Chedygov
"Modifier: (je recommande toujours d'utiliser des images pour des polices non standard car le sIFR ajoute du temps à un projet et peut nécessiter une maintenance)." très bien dit. sIFR est une technique vraiment cool mais elle semble exiger beaucoup pour obtenir le look EXACT que vous voulez. Si vous avez le temps d'apprendre et de maîtriser cette technique, je la recommande vivement. Mais si vous cherchez une technique de remplacement de police rapide et facile, j'utiliserais le remplacement d'image ou même la propriété css @ font-face
Derek Adair
10

Typeface.js et Cufon sont deux autres options intéressantes. Ce sont des composants JavaScript qui rendent des données de police spéciales au format JSON (que vous pouvez convertir à partir des formats TrueType ou OpenType sur leurs sites Web) via le nouvel élément <canvas> dans tous les navigateurs plus récents, à l'exception d'Internet Explorer et via VML dans Internet Explorer.

Le principal problème avec les deux (à partir de maintenant) est que la sélection de texte ne fonctionne pas ou au moins ne fonctionne que très maladroitement.

Pourtant, c'est très agréable pour les gros titres. Texte du corps ... Je ne sais pas.

Et c'est étonnamment rapide.

Thomas
la source
Une autre option intéressante est typekit.com Concept similaire.
Zack
8

Ou vous pouvez essayer sIFR . Je sais qu'il utilise Flash, mais uniquement s'il est disponible. Si Flash n'est pas disponible, il affiche le texte d'origine dans sa police d'origine (CSS).

Casper
la source
4

La technique que le W3C a recommandée pour ce faire est appelée «incorporation» et est bien décrite par les trois articles ici: Incorporation de polices . Dans mes expériences limitées, j'ai trouvé ce processus sujet aux erreurs et j'ai eu un succès limité à le faire fonctionner dans un environnement multi-navigateur.

Steve Moyer
la source
4

Safari et Internet Explorer prennent tous deux en charge la règle CSS @ font-face, mais ils prennent en charge deux types de polices intégrés différents. Firefox prévoit de prendre en charge le même type qu'Apple très prochainement. SVG peut incorporer des polices mais n'est pas encore largement pris en charge (sans plugin).

Je pense que la solution la plus portable que j'ai vue est d'utiliser une fonction JavaScript pour remplacer les titres, etc. par une image générée et mise en cache sur le serveur avec la police de votre choix - de cette façon, vous mettez simplement à jour le texte et vous n'avez pas à le faire des trucs dans Photoshop.

zobier
la source
Cela ne doit pas être fait avec JavaScript. Je sais que beaucoup de gens aiment utiliser JavaScript pour pas mal de choses de nos jours, mais une technique CSS standard peut être plus appropriée ici. Voir sitepoint.com/article/header-images-css-xhtml
hangy
Je suis désolé s'il y a confusion, la technique ne fait pas référence à la méthode de remplacement d'image qui, comme vous le dites, peut être CSS. Il s'agit de générer des graphiques représentant une chaîne donnée dans une police / un style particulier, à la volée, sur le serveur - ce qui évite d'avoir à les créer manuellement.
zobier
4

Si vous utilisez ASP.NET, il est vraiment facile de générer des polices basées sur des images sans avoir à installer (comme en ajoutant à la base de polices installée) des polices sur le serveur en utilisant:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

puis dessiner avec cette police sur un Graphics.

mattlant
la source
1
eh bien, oui ... Et votre utilisateur peut oublier de copier et coller. Et zoom aussi, dans les anciens navigateurs. Je ne parle même pas des problèmes de bande passante!
e-satis
2
Ouais, ok, et la question spécifiait qu'il allait l'utiliser pour le texte du contenu? Non, ce n'était pas le cas, c'était une question générale, et c'était une réponse générale. Les petits extraits de texte, en-têtes, etc., ne prennent pas beaucoup de bande passante. Sheesh, attrape-toi!
mattlant
3

Il semble que cela ne fonctionne que dans Internet Explorer, mais une recherche rapide sur Google pour les "polices incorporées html" donne http://www.spoono.com/html/tutorials/tutorial.php?id=19

Si vous voulez rester indépendant de la plate-forme (et vous devriez!), Vous devrez utiliser des images, ou simplement utiliser une police standard.

James Muscat
la source
3

J'ai fait un peu de recherche et déterré Dynamic Text Replacement (publié le 2004-06-15).

Cette technique utilise des images, mais elle semble être "mains libres". Vous écrivez votre texte et vous laissez quelques scripts automatisés effectuer une recherche et un remplacement automatisés sur la page pour vous à la volée.

Il a certaines limites, mais c'est probablement l'un des choix les plus faciles (et plus compatibles avec les navigateurs) que tous les autres que j'ai vus.

Kent Fredric
la source
3

Il est également possible d'utiliser des polices WOFF - exemple ici

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
Wilf
la source
3

Fournissez simplement le lien vers la police réelle comme celle-ci et vous serez prêt à partir

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
Abhijeet Kumar
la source
Une bonne alternative simple. Et vous êtes sûr d'avoir le droit de l'utiliser. Voir developers.google.com/fonts/docs/getting_started
Tim Erickson
2

Typeface.js JavaScript Way:

Avec typeface.js, vous pouvez incorporer des polices personnalisées dans vos pages Web afin de ne pas avoir à rendre le texte aux images

Au lieu de créer des images ou d'utiliser Flash uniquement pour afficher le texte graphique de votre site dans la police de votre choix, vous pouvez utiliser typeface.js et écrire en HTML et CSS simples, comme si vos visiteurs avaient la police installée localement.

http://typeface.neocracy.org/

Bakkal
la source
2

Si vous avez un fichier de votre police, vous devrez ajouter plus de formats de cette police pour d'autres navigateurs.

À cet effet, j'utilise un générateur de polices comme Fontsquirrel, il fournit tous les formats de police et son CSS @ font-face, vous n'aurez qu'à le glisser-déposer dans votre fichier CSS.

saadeez
la source