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 lí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.

Puntúa este artículo
[Total: 3 Average: 5]
Antonio López
Antonio López Tomás
Director SEO en Elblogdelseo | Últimos Post

Antonio López Tomás es fundador y Director SEO en Elblogdelseo.com y en Seostar.es. Profesor de SEO y Marketing digital en varias universidades (Unizar, UMU, UCAM, UNAE, U. Pompeu Fabra...) y Escuelas de negocios (EAE, IEBS. Marketing and Web, Seoworking, AulaCM...). Speaker en eventos de Marketing Digital y Autor de "Pensamientos Viajeros".

12 comentarios
    • Antonio López
      Antonio López Dice:

      Hola Mauricio.
      En principio era con Worpdress, pero puedes utilizarlo en lo que quieras.
      Lo mejor es siempre crear clases, para luego llamar esa clase. Saludos

      Responder
  1. Williams Heredia
    Williams Heredia Dice:

    hola, hice esto segun lo que explicas:
    @font-face {

    font-family: ‘Bunya’;

    src: url(‘fonts/Bunya.eot’);
    src: url(‘fonts/Bunya.eot’) format(‘embedded-opentype’),
    url(‘fonts/Bunya.woff’) format(‘woff’),
    url(‘fonts/Bunya.ttf’) format(‘truetype’),
    url(‘fonts/Bunya.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    p {
    Font-family: ‘Bunya’;
    }

    pero no me resulta. podrias ayudarme?

    Responder
    • Antonio López
      Antonio López Dice:

      Hola Williams.
      Tienes que tener en cuenta que el copiar y pegar no siempre sale bien, porque te puede cambiar las comillas etc… Mira el tema de los saltos de línea no vayas a tener un problema con eso. Saludos

      Responder
    • Antonio López
      Antonio López Dice:

      Hola Mar
      Pues en teoría no debería ralentizar nada. Es un fichero que se carga dentro de la web, no se utiliza Api ni nada. Tendría que ver exactamente cuanto más tarda en cargar utilizando fuentes propias o utilizando fuentes de Google.
      Muchas gracias por el comentario Mar.

      Responder
  2. Mirta
    Mirta Dice:

    Yo te comparto mi experiencia y me funciono de una en modo local.Si obviamente tuve que revisar bien la instrucción por las comillas y demases pero me re-sirvió porque estoy armando una web de eventos. Gracias Antonio

    Responder

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 una respuesta

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

*