Cómo instalar una fuente original en tu web responsive

La tipografía de una página web influye de forma determinante en la apariencia de la misma. Junto a las imágenes, son los componentes fundamentales que harán que una diseño web quede estéticamente perfecto. Además, ambos componentes pueden ser usados libremente sin que afecte al diseño web responsive que debe tener cualquier página que se precie hoy día. Nos vamos a centrar, en este artículo, en cómo instalar cualquier fuente que encuentres mientras navegas, de una forma sencilla, y simplemente utilizando unas líneas de código. Necesitarás:

  • acceso a tu ftp, pues será necesario que subas las tipografías a tu servidor.
  • Posibilidad de modificar las primeras líneas del archivo css u hoja de estilos que afecte a la apariencia de tu página web.

Problemas con tipografías y diseño web

Antes de empezar, simplemente advertir que con el sistema que explicaremos a continuación, será posible visualizar las letras de tu página tal y como deseas, es decir, con la fuente que elijas. Independientemente de que el usuario las tenga o no cargadas en su ordenador o su navegador las soporte. Vamos a “llamar” a nuestra letra desde nuestro servidor, por eso será necesario que tengas acceso a tu ftp.

Código para instalar una tipografía o fuente en tu hoja de estilos

@font-face
{
font-family: “nombrequequierasponer”;
src: url(“fonts/nombredelatipografia.eot”);
src: url(“fonts/nombredelatipografia.eot”) format(“embedded-opentype”),
url(“fonts/nombredelatipografia.woff”) format(“woff”),
url(“fonts/nombredelatipografia.ttf”) format(“truetype”),
url(“fonts/nombredelatipografia.svg”) format(“svg”);
}

El parámetro @font-face es el que te abrirá las puertas a cualquier tipografía que encuentres y quieras utilizar para tu página web. Es importante que tu primera regla css sea esta, y que debajo coloques todas las demás. De no hacerlo así puede dar problemas.

Pasos para instalar una fuente en mi servidor y usarla en mi web

  • En primer lugar, debemos colocar el código mostrado en tu hoja de estilos. Debe ser nuestra primera regla css. A partir de aquí, modifica “nombrequequierasponer” por el nombre que quieras poner a esa letra. Puede ser cualquier, no necesariamente el nombre de la tipografía.
  • Después, descarga en tu computadora la fuente que más te guste.
  • Conviértela a todos los formatos que has visto en el código, y que son:
    • eot
    • woff
    • ttf
    • svg
  • Para hacerlo, sólo tienes que teclear en google “convertir fuente de ‘el formato que tengas’ a cada uno de los otros formatos. Existen varias páginas que realizan esta función y que descargarán el archivo convertido a tu ordenador. En este tutorial de cristalab se ofrecen diversas páginas que lo realizan.
  • Con todos los formatos, crea en tu ftp la carpeta con el nombre fonts, e incluye dentro la tipografía en todos los formatos señalados.
  • Como paso final, sólo tendrás que añadir a los elementos que quieras que tengan esa tipografía la siguiente línea:

font-family:”nombrequehayaspuestoanteriormente”

por ejemplo, si quieres añadirlo a tus h1 la regla quedaría así:

h1 {

font-size:12px;

font-family:”nombrequehayaspuestoanteriormente”;

color:black;

}

Un pensamiento en “Cómo instalar una fuente original en tu web responsive

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>