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.

Puedes seguir los comentarios de esta entrada a través de RSS 2.0 Usted puede dejar un comentario, o trackback.

Acerda de Juan Sebastián

Ingeniero de Sistemas y Telecomunicaciones de la Universidad de Manizales (Colombia) con énfasis en Redes y Seguridad Informática. Creador y administrador de ComuSOFT.com y apasionado del mundo de las redes de telecomunicaciones, el Software libre, Linux y la Seguridad de la Información. Actualmente me desempeño como Help Desk Engineer en una importante Multinacional de Seguridad Informática en Latino América. En lo que pueda colaborarte, lo haré con gusto!
Escribe un Comentario

8 Respuestas



Escribe un comentario

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