Página 1 de 1

Agregando Nuevas Fuentes en archivos CSS

Publicado: Mié Sep 13, 2017 10:24 am
por Jaibol Santaella
Supongamos que deseas incorporar ciertas fuentes tipográficas en especial a tu sitio web, estas podran ser descargadas e incorporadas en tu servidor web. Su forma de agregar es muy similar, pero cabe mencionar que varían segun el formato de la Fuente (tipografía)

Lo primero que debemos hacer es crear un archivo *.css por ejemplo "misfuentes.css"

Dentro del archivo antes mencionado agregamos:

Fuentes OTF

Código: Seleccionar todo

 @font-face {

font-family: Nombre-de-la-Fuente;[b][u] Fuentes woff2 [/u][/b]

src: url(‘/Aquí-debe-ir-la-ruta-de-tu-fuente.otf’) format('opentype');

}
Fuentes TTF

Código: Seleccionar todo

@font-face {

font-family: Nombre-de-la-Fuente;

src: url(‘/Aquí-debe-ir-la-ruta-de-tu-fuente.ttf’) format('truetype');

}



Fuentes woff2

Código: Seleccionar todo


@font-face {
  font-family: 'Nombre-de-tu-Fuente';
  font-style: Tu-estilo;
  font-weight: Tu-tamaño;
  src: local('Nombre-de-tu-Fuente'), local('Nombre'), url(Ruta-del-archivo.woff2) format('woff2');
}

}

Ejemplo:

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}