Cómo utilizar Cualquier fuente en tu Página web

creación Web

 

 

Cuando nos enfrentamos a un Proyecto Web debemos tener todo atado y bien atado como ya explicaba en un artículo anterior: cómo preparar un proyecto web.

Y una de las cuestiones que tenemos que tener claro es la fuente que se va a utilizar. Lo más común es utilizar Arial, o Times New Roman, Comic, Cursive… o muchas otras que no hace falta hacer nada en concreto en la web: (en css  Font-family: ‘Arial’;).

Pero puede que el cliente que te contrata o a quien le estás ayudando a hacer el blog o la página web quiera una fuente en concreto que no está disponible y hay que instalarla en tu web para poder ser reconocida por todos los exploradores: Firefox, IE, Chrome, Safari

Instrucciones para instalar cualquier fuente en tu Página Web:

  1. Seleccionar la fuente adecuada en ttf y convertirla a los formatos .eot .woff y .svg. Para ello utilizamos el conversor más sencillo para conseguir éstas conversiones y además es gratuito:

http://www.freefontconverter.com/

Su utilización es sencilla: Seleccionamos el archivo en ttf y lo convertimos en cada uno de las extensiones (formatos) antes mencionados y los guardamos.

download (20)

 

  1. Subimos las fuentes en los cuatro formatos que hablábamos al directorio pertinente. Los que utilicen WordPress sería al directorio Font dentro del tema utilizado, los que utilicen Prestashop es un poco más complicado, aunque si utilizamos google Font se simplifica ostensiblemente.
  2. Debemos declarar las fuentes en css para poder utilizarlas. Para ello (en WordPress) vamos a stylecss y añadimos la siguientesíneas:
@font-face {

font-family: ‘Nombre de la fuente’;

   src: url('fonts/ Nombre de la fuente.eot');

   src: url('fonts/ Nombre de la fuente.eot?#iefix') format('embedded-opentype'),

        url('fonts/ Nombre de la fuente.woff') format('woff'),

        url('fonts/ Nombre de la fuente.ttf') format('truetype'),

        url('fonts/ Nombre de la fuente.svg#adlerRegular') format('svg');

  font-weight: normal;

  font-style: normal;

}

Luego tenemos dos opciones. En el mismo style podemos añadir lo siguiente:

p {

Font-family: ‘Nombre de la fuente’;

}

De esta forma cada párrafo utilizará éste tipo de fuente, o la podemos utilizar para las etiquetas h1, h2, h3 o simplemente en un párrafo concreto.

Así,  tenemos nuestra web como queremos, o como nos han pedido, y cumplir con las expectativas de nuestro cliente.

Si tú lo haces de forma distinta compártelo con nosotros.

2 comentarios

Trackbacks y pingbacks

  1. […] del Diseño cobra mucha importancia la o las fuentes que se utilizarán como explica en el blog de Trendinggoogle. Ahí se explica como instalar en tu página web cualquier fuente que queramos utilizar para […]

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*