Cargar la tipografia de Firefox OS

En un articulo mencionaba la fuente Fira Sans que es la fuente predetermina del sistema operativo Firefox OS.

En esta entrada explicare como podemos cargar mediante CSS y poderla usar en nuestras aplicaciones web.

usaremos la etiqueta CSS font-face

<style>
@font-face {
 font-family: "FiraSansOT-Light";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraSansOT-Light.otf) format("opentype");
} 

@font-face {
 font-family: "FiraSansOT-LightItalic";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraSansOT-LightItalic.otf) format("opentype");
} 

@font-face {
 font-family: "FiraSansOT-Regular";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraSansOT-Regular.otf) format("opentype");
} 

@font-face {
 font-family: "FiraSansOT-RegularItalic";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraSansOT-RegularItalic.otf) format("opentype");
} 

@font-face {
 font-family: "FiraSansOT-Medium";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraSansOT-Medium.otf) format("opentype");
} 

@font-face {
 font-family: "FiraSansOT-MediumItalic";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraSansOT-MediumItalic.otf) format("opentype");
} 

@font-face {
 font-family: "FiraSansOT-Bold";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraSansOT-Bold.otf) format("opentype");
} 

@font-face {
 font-family: "FiraSansOT-BoldItalic";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraSansOT-BoldItalic.otf) format("opentype");
} 


@font-face {
 font-family: "FiraMonoOT-Regular";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraMonoOT-Regular.otf) format("opentype");
} 

@font-face {
 font-family: "FiraMonoOT-Bold";
 font-style: normal;
 font-weight: 300;
 src: url(FiraOpenType/FiraMonoOT-Bold.otf) format("opentype");
} 
</style>

y para usar la fuente solo con especificar su nombre en font-family ya estará

.fuente1 {
 font-family: "FiraSansOT-Light",sans-serif;
 color: black;
 line-height: 1.5em;
 font-size: 1em;
}

Dejo el ejemplo entero para descargar y probar la carga de fuentes Font Sans formato OpenType

Categories: Articulo, desarrollo