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?

— vaske
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

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
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
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
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
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
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

L'article Font-face dans IE: faire fonctionner les polices Web dit qu'il fonctionne avec les trois principaux navigateurs.

Voici un exemple sur lequel j'ai travaillé: http://brendanjerwin.com/test_font.html

Plus de discussion est dans l' incorporation de polices .

— brendanjerwin
source

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
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
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
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
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
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
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
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
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
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
source

2

Voir l'article 50 Outils de conception utiles pour une belle typographie Web pour d'autres méthodes.

Je n'ai utilisé que du Cufon . Je l'ai trouvé fiable et très facile à utiliser, donc je suis resté avec.

— Blair
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
source