Cómo cambiar el Tipo de Fuente con CSS

Muchas veces se hace necesario cambiar el tipo de letra que se usa normalmente en cualquier sección de un Sitio web o Blog, como menús, cuadros de texto, títulos, etc, por cuestiones de diseño, presentación o simple gusto. Pero cambiar la letra no significa cambiarla por las familias más usadas  como:

  • Arial, Helvetica, sans-serif
  • “Times New Roman”, Times, serif
  • “Courier New”, Courier, monospace
  • … y otras

Que son las que normalmente tenemos en nuestros PC’s, sino por fuentes atractivas, esas que normalmente se usan para hacer logos, marcas o que se ven en banners de publicidad o comerciales. En este sencillo manual, se explica una forma muy fácil de hacerlo mediante CSS.

Pasos:

  • Lo primero es tener el archivo de la fuente a la mano. Si aún no se define la fuente que se desea usar, hay varios sitios en internet que tienen miles de fuentes o tipos de letra para descargar totalmente gratis.

  • Una vez se tenga el archivo de la fuente en el PC, mediante cualquier cliente FTP o desde el administrador de archivos de tu plataforma o desde el cPanel de tu Web, sube el archivo de la fuente a una ubicación dentro de tu sitio y guarda la dirección URL de la fuente, ya que la necesitaremos más tarde.
  • Lo siguiente es abrir tu plantilla o archivo CSS y copiar lo siguiente, preferiblemente al inicio:

@font-face {

font-family: “mi_nueva_fuente”;

src: url(“http://www.mi_direccion_de_internet.com/wp-content/uploads/fonts/mi_nueva_fuente.ttf”);

}

  • En la línea de font-family” se coloca el nombre que le quieres dar a tu nueva familia de fuentes, lo puedes llamar como quieras pero obviamente este nombre se usará posteriormente por lo que no se debe olvidar. En la siguiente línea src” debe colocarse la dirección o URL de la fuente donde se subió en el segundo paso.

Ahora lo único que hay que hacer es modificar la fuente que deseas cambiar. Por ejemplo si deseas cambiar los títulos de los Artículos con el tipo de letra que acabas de instalar, busca en tu archivo css la clase que define los artículos. En mi caso sería así:

h2.entry-title a {

color:black;

font-family: “mi_nueva_fuente”;

}

Ya con esto, los títulos de los artículos quedarían mostrándose con el nuevo tipo de fuente.

Esto es todo lo que hay que hacer, si quizás tienen problemas, preguntas o comentarios, no duden en hacerlo ya que responderé a la mayor brevedad posible.

Importante!

Muchas veces el tipo de fuente instalada en el sitio web no queda igual en todos los Navegadores, siendo el principal causante de este problema el Internet Explorer. Si has seguido este manual y en IE aún tu letra sigue como antes, sigue este tutorial para solucionarlo.

8 pensamientos en “Cómo cambiar el Tipo de Fuente con CSS

  1. Pingback: Bitacoras.com

  2. En principio muchas gracias por el articulo, lo puse en práctica y queda genial, pero tengo un pequeño gran problema, y es el siguiente:
    Cuando escribo palabras con acentos como “Contáctanos” el estilo y tipo de fuente parece resetearse apartir de la “á” colviendo a un tipo de letra por defecto. Cómo hago para resolver esto 🙁 ya probe cambiando el meta en la página html con charset=iso-8859-1″ y todas sus variaciones pero nada. 🙁
    Les agradeceria mucho su ayuda….

    • Que tal Ronald, te cuento que me pasó algo similar debido a que el tipo de fuente que usaba no soportaba tildes ni caracteres cono la ñ debido a que era una letra para idioma Inglés, primero prueba el tipo de fuente en Word con todos los caracteres que deseas usar para saber si es compatible en tu sitio web. Porque si dices que ya has cambiado todas las combinaciones de charset, creo que el problema es lo que te digo. Prueba con otro tipo de letra y cuéntame como te va.

      Saludos! 🙂

  3. Un saludo Juan y gracias por la rápida respuesta.
    Me tome el trabajo de editar la fuente que queria usar, tenias razón la fuente no tenia definidas las tildes y la ñ, así que me descargue el programa FontCreator y le aumente los caracteres que queria

    Aqui un manual para usar el programa http://porrytutoriales.com.ar/tag/acento

    Muchas gracias me sirvio de mucho tu articulo 😉

    hasta una próxima oportunidad

  4. Pingback: Solución: Problema con las Fuentes o Letras en IE con CSS - ComuSOFT.com

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.