Búsqueda personalizada
 
 
 
 
Importar una fuente no disponible en el navegador (@font-face)
   

En CSS3 se especifica una nueva sintaxis para importar fuentes no disponibles en el navegador y que se descargan de un servidor web.

El problema actual es que hay varios formatos de fuentes que son apoyados por distintos navegadores. El IE8 e inferiores solo admite el formato EOT que es propietario. El formato True Type es ampliamente soportado por navegadores modernos. Otros formatos son el OpenType, SVG y WOFF.

Esta diversidad de formatos de fuente hace necesario que indiquemos la mayor cantidad de formatos de fuentes posibles para nuestro sitio.

Para importar una fuente que ser utilizada por una pgina web tenemos que utilizar la regla @font-face, en la misma indicamos el nombre de la fuente a importar y la direccin web de donde la debe descargar el navegador, la sintaxis es:

@font-face {
  font-family: [nombre de la fuente];
  src: local(""),
  url("nombrearchivo.woff") format("woff"),
  url("nombrearchivo.otf") format("opentype"),
  url("nombrearchivo.svg#nombre de la fuente") 
format("svg");
}

Podemos descargar una fuente del sitio www.fontsquirrel.com

para probar la importacin de fuentes (hay una seccin donde podemos descargar varios formatos para la misma fuente)

Veamos un ejemplo de utilizar una fuente descargada del sitio mencionado anteriormente:

<!DOCTYPE html> 
<html> 
<head> 
<title>Prueba</title> 

<style type="text/css"> 


@font-face {
    font-family: "Ubuntu";
    src: url("Ubuntu-Title-webfont.eot") format("eot"),
         url("Ubuntu-Title-webfont.woff") format("woff"),
         url("Ubuntu-Title-webfont.ttf") format("truetype"),
         url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");
}

#recuadro1{
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}

#recuadro1 p {
  font-family:Ubuntu;
  color:#ff0000;
  font-size:20px;
}


body {
  background:white;
  margin:50px;
}

</style> 

</head> 
<body> 

<div id="recuadro1"> 
<h3>Recuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis 
dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, </p>
</div> 


</body> 
</html>

El resultado tipogrfico de importar esta fuente es:

@font-face

En la regla @font-face hacemos referencia a cuatro fuentes con distintos formatos y definimos su nombre en la propiedad font-family:

@font-face {
    font-family: "Ubuntu";
    src: url("Ubuntu-Title-webfont.eot") format("eot"),
         url("Ubuntu-Title-webfont.woff") format("woff"),
         url("Ubuntu-Title-webfont.ttf") format("truetype"),
         url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");
}

Ahora podemos utilizar la fuente "Ubuntu" que acabamos de crear:

#recuadro1 p {
  font-family:Ubuntu;
  color:#ff0000;
  font-size:20px;
}

Con lo anterior indicamos que los prrafos contenidos en #recuadro1 deben utilizar la fuente Ubuntu.

 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion