Même si un développeur web HTML5 peut suggérer toutes les polices pour une page Web, les fichiers de police sont traditionnellement un atout au niveau du client. Si le client n'a pas la police installée, elle ne le verra pas. Heureusement, CSS3 soutient une solution raisonnable pour fournir les polices téléchargeables.

Le style ne fonctionne pas comme la plupart des éléments de CSS. Elle ne concerne pas le balisage pour une partie de la page. Au lieu de cela, il définit une nouvelle valeur de CSS qui peut être utilisé dans d'autres balises. Plus précisément, il vous permet de placer un fichier de police sur votre serveur et de définir une famille de polices utilisant cette police.

 @ font-face {font-family: "Miama" -src: url ("Miama.otf") -}

La famille de polices attribut indique le nom que vous allez donner à cette police dans le reste de votre code CSS. Typiquement, il est similaire au nom de fichier de police. La famille de polices attribut est l'URL du fichier réel de la police car il se trouve sur le serveur. Après un font-face a été défini, il peut être utilisé dans un attribut ordinaire dans le reste de votre code CSS:

 h1 {font-family: Miama-}

Voici le code pour l'exemple de police personnalisée:

Embarqué Demo polices
Voici une autre police personnalisée

Bien que tous les navigateurs modernes prennent en charge la @ font-face fonction, les types de fichiers pris en charge varient réels d'un navigateur à. Voici les types de polices primaires:

• TTF: Le format TrueType standard est bien pris en charge, mais pas par tous les navigateurs. Beaucoup de polices open-source sont disponibles dans ce format.

• FTO: Ceci est similaire à TTF, mais est une norme véritablement ouvert, de sorte qu'il est préféré par ceux qui sont intéressés par des normes ouvertes. Il est soutenu par la plupart des navigateurs, sauf IE.

• WOFF: WOFF est un format standard proposé actuellement pris en charge par Firefox. Microsoft a laissé entendre à soutenir ce format dans IE.

• EOT: Ce format est police intégrée propriétaire de Microsoft. Il ne fonctionne que dans IE, mais pour être honnête, Microsoft a intégré le soutien police avait pendant de nombreuses années.

Vous pouvez utiliser un outil de conversion de police comme onlinefontconverter.com/ pour convertir à tout ce que la police format que vous préférez.

Il est possible de fournir multiples src attributs. De cette façon, vous pouvez inclure à la fois un EOT et la version de la FTO une police de sorte qu'il va travailler sur une grande variété de navigateurs.

Lorsque vous utilisez cette technique, vous devez avoir une copie du fichier de police local. Il devrait être dans le même répertoire que votre page web. Lorsque vous commencez un hébergement sur un serveur web, vous aurez envie de déplacer votre fichier de police au serveur avec toutes les autres ressources nécessaires à votre page Web. Juste parce que vous pouvez inclure une police ne signifie pas que vous devriez. Réfléchissez bien à la lisibilité.

Aussi, être respectueux de la propriété intellectuelle. Heureusement, il ya beaucoup d'excellents polices open-source disponibles. Commencez par regarder Open Library police. Google Fonts est une autre excellente ressource pour les polices de caractères gratuites. Avec l'outil Google police, vous pouvez sélectionner une police intégrée sur les serveurs de Google, et vous pouvez copier le code qui rend la police disponible sans téléchargement.