Vous pouvez implémenter votre OTF
police en utilisant @ font-face comme:
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}
Toutefois , si vous voulez soutenir une grande variété de navigateurs modernes , je vous recommande de passer à WOFF
et TTF
types de polices. WOFF
Le type est implémenté par tous les principaux navigateurs de bureau, tandis que le TTF
type est un remplacement pour les anciens navigateurs Safari, Android et iOS. Si votre police est une police gratuite, vous pouvez convertir votre police en utilisant par exemple un convertisseur de police en ligne .
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
Si vous souhaitez prendre en charge presque tous les navigateurs qui sont toujours disponibles (ce n'est plus nécessaire à mon humble avis), vous devez ajouter d'autres types de polices comme:
@font-face {
font-family: GraublauWeb;
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 */
}
Vous pouvez en savoir plus sur les raisons pour lesquelles tous ces types sont implémentés et leurs hacks ici . Pour obtenir une vue détaillée des types de fichiers pris en charge par les navigateurs, voir:
Prise en charge du navigateur @ font-face
Prise en charge du navigateur EOT
Prise en charge du navigateur WOFF
Prise en charge du navigateur TTF
Prise en charge du navigateur de polices SVG
J'espère que cela t'aides