Blog de Estrategia y Marketing Digital

Cómo cambiar el tipo de fuente de tu plantilla de wordpress.org | Comunicando Va | Marketing y Social Media para autónomos y pymes

Cómo cambiar el tipo de fuente de tu plantilla de WordPress

Lo bueno de WordPress.org para los que no sabemos de programación es que tiene muchísimas plantillas que, seguro que alguna, se adaptan a nuestras necesidades.

Eso sí, la perfección no existe y es muy complicado que nos guste absolutamente todo, por eso tenemos que priorizar y quedarnos con la que más necesidades satisfaga (o pedir a alguien que te haga una a medida) Para todo lo demás, Mastercard. Ay no, para todo lo demás, a buscar la forma de cambiarlo como locos.

Eso nos pasó a nosotras con nuestra plantilla para Eventos Bambú, queríamos que la web tuviera la letra que habíamos elegido como corporativa.

Así que nada, a buscar. Encontré varias opciones que, aunque alguna no me sirvió puede que a ti sí te sirva:

Cómo cambiar el tipo de fuente de tu plantilla de wordpress.org | Comunicando Va | Marketing y Social Media para autónomos y pymes

1. WP Google Fonts

Con este plugin puedes añadir las fuentes de Google a tu sitio de WordPress.org.

Para esto nos vamos al apartado Plugin > añadir nuevo > ponemos WP Google Fonts y le damos a “instalar ahora”.

añadir-plugin

Una vez instalado, le damos a “activar”.

Para poder editarlo, tenemos que irnos a Ajustes > Google fonts e ir eligiendo las fuentes que queremos para cada apartado:

google-fonts

Y ya tenemos las nuevas fuentes para nuestro sitio en wordpress.org.

Pero claro esto sólo sirve para las fuentes de Google, que no son las mismas que las que podemos tener en nuestro ordenador. Para eso hay que utilizar la segunda opción.

 

2. WordPress font uploader free

Con esta opción podemos subir desde nuestro propio ordenador las fuentes .ttf y .otf que queramos.

Para esto hacemos como antes, nos vamos a Plugins > añadir nuevo y escribimos “wordpress font uploader”.

Le damos a “instalar ahora” y luego a “activar”.

Una vez hecho esto, vamos a Apariencia > Font UploaderAhí podremos subir los archivos .ttf y .otf desde nuestro ordenador y decir dónde queremos que se aplique.

seleccionar-archivo

Estas fuentes se encuentran en Equipo (mi PC) > C: > Windows > Fonts

Al menos a mí no me permitió subir el archivo desde esa carpeta, por lo que tuve que pegarla en otra fuera de C:

Con esta opción tuve un problema: cuando estaba investigando cómo hacer la web desde el servidor local me funcionaba perfectamente, pero en cuanto intenté hacerlo con la web ya subida al hosting no funcionaba el plugin. No me preguntéis por qué, porque no tengo ni idea.

Así que, después de un pequeño ataque de pánico, busqué y encontré una tercera opción, que para mí fue la definitiva.

3. Toqueteando código

Nunca creí que diría esto, pero esto de toquetear código puede llegar a ser hasta divertido. He empezado a hacer cosas muy básicas (obvio) pero no sé, como que hace ilusión cuando consigues cambiar algo, te sientes un poco informática.

Visto que el tema de los plugins no me funcionaba, decidí liarme la manta a la cabeza y buscar la forma de hacerlo a través de código CSS.

Para ello tienes que irte a Apariencia –> Editor y elegir la hoja de estilo Style.css

Si te vas desplazando por la hoja verás varios apartados de “font-family” o “font” donde vienen 3 o 4 tipos de fuentes. Estas fuentes son de la misma familia, muy parecidas entre ellas, para que si alguien en su ordenador no tiene una fuente pueda ver el contenido de tu web igualmente.

fuente

Yo lo que hice fue buscar la “familia” de la fuente que quería poner en la web. Si os interesa, lo descubrí en esta página. Entonces elegí otras 2 fuentes aparte de la que quería poner y fui sustituyendo en el documento.

Puedes elegir diferentes tipos de fuentes para el cuerpo, los títulos, el footer… Simplemente tienes que ir buscando el apartado correspondiente dentro del documento.

Por ejemplo, para cambiar la fuente de los títulos tienes que buscar este apartado:

titulos

Y como puedes ver, también podrías cambiar el color y el tamaño.

Lo bueno de esta forma es que te ahorras un plugin 🙂

27 comentarios

  1. Joel Byo C
    19/01/2014

    Hola que tal tengo una duda no me quedo muy claro como subir una nueva fuente una fuente que no este dada de alta en google fonts (quiero instalar OPENSANS-LIGHT) veo en la familia de fuente el sig codigo:

    /* 04. Typography
    /* ———————————————————————— */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-style: bold;
    margin: 0 0 10px 0;
    padding: 0;
    }

    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a { font-weight: inherit }

    h1 {
    font-size: 28px;
    line-height: 1.6;
    }

    h2 {
    font-size: 22px;
    line-height: 1.6;
    }

    h3 {
    font-size: 18px;
    line-height: 1.6;
    }

    h4 {
    font-size: 16px;
    line-height: 1.6;
    }

    h5 {
    font-size: 14px;
    line-height: 1.6;
    }

    h6 {
    font-size: 12px;
    line-height: 1.6;
    }

    .highlight {
    color: #289dcc;
    }

    p { margin: 0 0 20px 0 }

    p img { margin: 0 }

    em { font-style: italic }

    strong { font-weight: bold }

    small { font-size: 80% }

    hr {
    border: solid #ddd;
    border-width: 1px 0 0;
    clear: both;
    margin: 10px 0 30px;
    height: 0;
    }

    pre {
    height: auto;
    font-family: Consolas, monospace;
    border: 1px solid #e2e2e2;
    background: #f7f7f7;
    padding: 20px 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin: 0 0 20px 0;
    overflow-x:auto;
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    }

    .hidden { display: none !important }

    ****** Mi duda donde meto el nombre de la letra? en: font-family: Arial, Helvetica, sans-serif; tengo que borrar Arial, Helvetica, sans-serif;?? y meter la nueva fuente?? disculpa pero soy algo nuevo en esto.

    Responder
    • Idoia Chacartegui
      19/01/2014

      ¡Hola Joel!

      Muchas gracias por pasarte.

      Para cambiar la fuente modificando código tienes que hacer precisamente lo que has dicho, sustituir en font-family las fuentes que hay por la que quieras.

      Eso sí, no pongas sólo la fuente que me has comentado, pon dos más de la misma familia. Esto es para asegurarte que si alguien, por el motivo que sea, no puede ver la fuente que has puesto, pueda seguir leyendo tu web.

      El motivo de ponerlas de la misma familia es para que, aunque no sea exactamente la misma fuente, sea muy parecida.

      Espero haberte ayudado! De todas maneras, si necesitas más ayuda, ya sabes dónde estoy.

      Saludos!

      Responder
  2. Robert Hell Calvo | MLM
    02/02/2014

    Excelente Post!

    Una consulta:
    Existe la posibilidad de tener un pluging pero que yo decida que tipo de letras quiero poner, es decir, que no sea fija? Me explico por ejemplo yo escribo una entrada o una pagina, y que en esa entrada/pagina pueda seleccionar un tipo de letra. Luego escribo otra entrada, pero que esta entrada disponga de otro tipo de letra, existe un pluging asi?

    Espero tus comentarios

    Saludos
    Robert Hell Calvo

    Responder
    • Idoia Chacartegui
      04/02/2014

      ¡Hola Robert!

      Muchas gracias por pasarte y perdona por tardar tanto en contestar, ¡estoy hasta arriba de trabajo!

      La verdad es que no conozco ningún plugin que haga lo que me dices, la única forma que creo que te puede servir es:

      – En cada página/entrada te pones en formato “texto”.
      – Pones el siguiente código: ESCRIBE TU TEXTO
      – Donde pone Candara pones el nombre de la fuente que tú quieras.

      Este código tienes que ponerlo en cada uno de los párrafos que escribas, pudiendo incluso poner cada párrafo con una fuente diferente.

      Es un poco más pesado que utilizar un plugin, pero es la única forma que se me ocurre.

      ¡Ya me cuentas cómo te va!

      De todas maneras, si descubro algo te digo.

      Saludos!

      Responder
  3. Diana P. Morales
    04/04/2014

    Hola: estaba decidida a intentar probar a tocar el código del Style CSS tal como indicas, pero veo que mi plantilla (de hecho, he probado en varias) no me da la opción de “Editor” (de CSS) en el menú “Apariencia”. Ni siquiera una plantilla que compré. Sólo me aparece en el menú los “Settings” de la plantilla en concreto y no puedo acceder a los CSS (al menos desde los menús principales, ya que estoy mirando en las otras categorías como “Herramientas”, etc).
    ¿Es normal? ¿Debería poder ver el editor de CSS en cualquier plantilla o, al menos, en las que he comprado?
    Gracias

    Responder
    • Idoia Chacartegui
      04/04/2014

      Hola Diana

      ¡Muchas gracias pos pasarte!

      Una preguntilla: ¿utilizas wordpress.org o wordpress.com?

      Responder
  4. Claudia
    29/06/2014

    Hola Idoia
    muchas gracias por tu post, leyendo sobre el tema casi desconfio de los plugins

    dos preguntas:
    – si lo quisiera hacer manualmente toqueteando el css, subo la font que he comprado en el ftp? en que carpeta?
    – si toqueteo el css y luego hago un actualización del tema, se me borran todas las modificaciones?

    muchas gracias de antemano
    Claudia

    Responder
    • Idoia Chacartegui
      01/07/2014

      ¡Hola Claudia!

      Creo que eso nos pasa a todos, al final intentamos evitar los plugins a toda costa 🙂

      Te contesto:

      – Yo nunca he comprado una fuente para usarla en mi web, he utilizado las básicas, así que hago lo explico en el último punto del post.
      No obstante, el lugar para subirlas debe ser /html/wp-includes/fonts
      Si haces esto comprueba que la fuente se ve bien en otros dispositivos que no la tengan instalada, por si acaso.

      – Sí, cuando hagas actualizaciones del tema se te van a borrar las modificaciones y vas a tener que volver a hacerlas.
      La forma de que esto no pase es utilizando un “child theme”, en este post explico lo que es y dejo un enlace por si alguien quiere hacerlo: http://comunicandova.wordpress.com/2013/12/04/que-es-y-para-que-sirve-un-child-theme/

      También puedes utilizar el plugin Jetpack (aunque ya sé que no te gustan los plugins) y hacer las modificaciones desde el editor del propio plugin.

      ¡Espero que te haya servido! Ya me cuentas.

      Muchas gracias por pasarte 🙂

      Responder
      • Claudia
        05/07/2014

        Muchas gracias!!! Me has sacado de dudas 🙂
        No conozco lo que hace Jetpack le voy a echar un ojo

        saludos 😉

        Responder
  5. Folleto online España
    24/07/2014

    Gracias, me ha sido de utilidad tu aporte, me pregunto si esto influye en el mejoramiento de trafico movil sugerido por adsense.

    Responder
    • Idoia Chacartegui
      28/07/2014

      Hola!
      Pues la verdad es que no te lo puedo asegurar, pero en principio no tiene por qué influir. Voy a ver si investigo un poco sobre el tema.
      Saludos!

      Responder
  6. Charles P.
    26/09/2014

    Hola Idoia,

    Primero gracias por el post. Quería comentarte que he probado lo que explicas y aunque modifique la tipografia por la que quiero no me la cambia. Lo he leído en muchos posts, foros y otras webs de ayuda, pero aunque sigo todos los pasos no se cambia.

    Me gustaría modificar todos los titulos de la web, ya sea del cuerpo o título de la entrada, de los títulos de los widgets…

    Por ejemplo, lo he modificado así (este es el cambio que quiero hacer, no quiero tipografía sans-serif):

    }
    body {
    font-size: 14px;
    font-size: 1rem;
    font-family: Georgia, Times New Roman, Serif;
    text-rendering: optimizeLegibility;
    color: #000;

    Muchas gracias de antemano
    Saludos!

    Responder
    • Idoia Chacartegui
      28/09/2014

      Hola Charles!

      Como lo estás haciendo está bien, tienes que ir cambiando cada uno de los apartados a los que quieras cambiar la tipogragía.

      Tienes que tener cuidado y las tipografías que en tu plantilla estuvieran entre comillas (“”) tienes que ponerlas también entre comillas cuando la cambies. Eso significa que es la fuente que va a utilizar la web de primeras, las otras están por si acaso alguien no tiene esa fuente instalada en su ordenador.

      Si te fijas en el ejemplo que pongo en el post, Candara está entre comillas.

      Quizás el problema es ese, prueba a poner Georgia entre comillas.

      Muchas gracias por pasarte!

      Responder
  7. Luis
    29/06/2015

    hola, buenas tardes y disculpa, espero me ayudes.. tengo un problema que se sube una imagen(banner) y resulta que no se la ve en chrome, de allí se ve en firefox y en explorer, espero me ayudes y disculpa

    Responder
    • Idoia Chacartegui
      30/06/2015

      Hola Luis!

      La verdad es que no sabría decirte, así sin ver la página en cuestión ni nada… es complicado.

      Responder
  8. Nía
    25/11/2015

    Genial el post!! Casi me he sentido como si fueras mi gemela perdida! xD Justo con las fuentes no había probado pero si que a veces modifico cositas desde código y me siento muy realizada (cuando funcionan, cuando no, es un estrés xD)

    Suerte!

    Responder
    • Idoia Chacartegui
      25/11/2015

      Jajajaja! qué felices nos hacen esas cosas 🙂

      Por cierto, muy chula tu web y los libros tienen muy buena pinta, ¡espero que vaya genial!

      Responder
  9. Jose Iskandar
    11/02/2016

    Hola Idoia!
    Muchas gracias por ayudarnos a los neofitos en estos temas. Sabes que instalé el pluging de easy google fonts y wp google fonts. Con eso puedo seleccionar el tipo de fuente para los p y los titulos h, los cambié todos a “ropa sans”, y en el preliminar se ve, pero luego si entro más tarde, ya no se ve el mismo tipo de letra.
    Intenté cambiar en el editor CSS usando esto:
    p {
    font-family: ‘Ropa Sans’ !important;
    }
    pero me sigue mostrando una fuente como predeterminada.

    tendrás idea si estaré haciendo algo mal?

    mi web es foodografo.com

    Muchas gracias!
    Jose.

    Responder
    • Idoia Chacartegui
      11/02/2016

      Hola Jose!

      La verdad es que no sé qué puede ser, si le doy a inspeccionar elemento me dice que la fuente es Ropa Sans en tamaño 15px y me ha parecido que efectivamente es esa la que se ve.

      Mira a ver si simplemente es algo de la caché, que no te permite ver los cambios. Actualiza la página pulsando F5 o borra el historial de búsqueda, a ver si así lo puedes ver bien.

      Por cierto, ¡muy chula la web! 🙂

      Un abrazo!

      Responder
  10. Sonia Fakiel
    31/03/2016

    Hola, cómo estás? Sabés si se puede y cómo cambiar la fuente y el color de fondo del menú de un sitio en WordPress? Gracias!

    Responder
    • Idoia Chacartegui
      02/04/2016

      Hola Sonia!

      Por poder sí se puede, pero no sabría decirte cómo. Si tu plantilla no te da la opción de hacerlo hay que tocar código, seguramente en head.php, pero puede ser diferente dependiendo de la plantilla.

      Lo siento!

      Responder
  11. ZuniReds
    27/12/2016

    Hola Guapa!
    Pues no se como llegue a tu blog, pero igual me dio gusto haberlo encontrado y bueno probare algunas fuentes del google a ver que tal se ve en mi blog, e igual estas invitada saludos y gracias.

    Responder
    • Idoia Chacartegui
      27/12/2016

      Hola Lidia! (me he asomado por tu blog y he visto cómo te llamas jejeje)
      Muchísimas gracias por pasarte, espero que te sirva de ayuda 🙂
      Un abrazo!

      Responder

2Pingbacks & Trackbacks en Cómo cambiar el tipo de fuente de tu plantilla de WordPress

  1. […] Cómo cambiar el tipo de fuente de tu plantilla de WordPress […]

Deja tu comentario

Tu correo electónico no será publicado. Los campos obligatorios estan marcados con un *