Índice

Importar una fuente

La regla de importación @font-face está definida en el módulo CSS Fonts Module Level 3, en estado Candidate Recommendation a 3 de octubre de 2013. He aquí su URL: http://www.w3.org/TR/css-fonts-3/.

Hasta el momento las páginas web no eran gran cosa en lo que respecta a tipografía. En efecto, como las fuentes dependían de las fuentes instaladas en el ordenador del internauta, había pocas fuentes disponibles al mismo tiempo en los puestos de usuario Windows o Mac.

Las hojas de estilo CSS3 permiten importar y utilizar una fuente personalizada incluso si no está instalada en el puesto del usuario. Esta propiedad @font-face constituye una innovación significativa para los diseñadores web, que podrán incluir, de este modo, fuentes más creativas.

La adopción de una fuente particular se realiza en dos fases.

Primero hay que descargar la fuente para, a continuación, incorporarla en la página.

@font-face { font-family: "nombre_fuente"; 
             url("nombre_fuente.extension_fuente");}

Comentarios

  • font-family: "nombre_fuente" indica con qué nombre se va a referenciar la fuente en la página.

  • url("nombre_fuente.extension_fuente") indica la url, mediante direccionamiento relativo o absoluto, de la fuente personalizada. Usando direccionamiento relativo, la fuente estará situada en la carpeta del sitio web igual que lo hace una imagen ...