SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

19 dic. 2013

Cómo usar fuentes personalizadas en tu blog!

Este tutorial es el remedio a mucha frustración. Sabía cómo utilizar las fuentes de google, ¿no lo sabéis hacer? Bueno aquí os lo explico tranquilidad. Pero me volví loca buscando tutoriales o algún foro donde explicaran como usar Fuentes propias, las que nos bajamos e instalamos en Windows.

Pues bien en este blog lo encontré, pero claro como siempre me gusta explicar a mí de otra manera las cosas, pienso que si alguien que no sabe mucho explica lo que ha entendido a otra persona que tampoco sabe cómo se hace, siempre lo explicará mejor que alguien que para él es algo muy básico. No sé si me he explicado bien ajajaja pero en fin, eso es lo que pienso.

No me enrollo mas vamos a lo que vamos.
Queremos utilizar un tipo de fuente que por desgracia no está en Google Fonts, entonces ¿qué hacemos?

Primero de todo descargarla en nuestro ordenador.
Hay muchísimas páginas donde  podéis descargar fuentes, si no sabéis ninguna escribir Free Fonts en google o mirad esta página
Bien, la dejamos ahí guardadita.

Ahora para que los navegadores (Firefox, Explorer, Opera, Chrome…) sepan que la fuente de nuestro blog hay que ir a cargarla a otro sitio, porque es genuina y muy nuestra (jeje) debemos utilizar una regla de CSS que se llama @font-face. Así que como la gente utiliza navegadores diferentes, y queremos que todo el mundo nos vea de la misma manera, lo que haremos es convertir nuestra fuente en cada uno de los formatos que utiliza cada navegador.

¿Cómo se hace eso?
Muuuy fácil, iremos a esta página donde nos generara automáticamente el archivo que necesitamos.
¿Os acordáis que hemos descargado la fuente que queríamos? Pues si esta en zip o rar o comprimida del modo que sea, ¡la descomprimimos!

Bien ahora en el generador de archivos de fontsquirrel añadimos la fuente que nos hemos bajado, aceptamos los acuerdos legales (tildándolos) y le damos a “kit” de fuentes.
Ya lo tenemos, en la carpeta que nos han dado en esta página tenemos los archivos necesarios. 

¡Descomprimimos!
Ahora iniciamos sesión en nuestra cuenta de Dropbox. Si no tienes una cuenta pues ¡regístrate! Es gratis, rápido, fácil y muy cómodo. Un servicio de hosting de archivos muy estable.

Nos logueamos en nuestro Dropbox y en la carpeta Public, subimos los archivos SVG, EOT, WOFF y TTF que acabamos de descomprimir. (Si hay algún archivo mas esos no los subimos)
Bien, los veis ahí subidos, pues ahora algo más fácil si cabe!. Abrid el Bloc de notas, dejároslo a mano. En los archivos subidos hacemos Click derecho y “copiar link público”. Vamos al bloc de notas y pegamos el link. Así de los 4 archivos.
    Nota: En los archivos que nos hemos bajado hay un archivo llamado stylesheet.css. Pero esta todo apelotonado, así que ni caso, os pongo el código mas a bajo y os resultara mucho más fácil hacerlo.

¡Editamos!
Ahora vamos a nuestro blog, plantilla y hacemos una backup!!! Muy importante.
Ahora editamos el HTML, bien abrimos con Ctrl+F el buscador y buscamos esto:

]]<b:skin>

Justo encima pegaremos el código:
@font-face {
    font-family: 'HOLASOYTUFUENTE';
    src: url('URL DE TU FUENTE.eot');
    src: url('URL DE TU FUENTE.eot?#iefix') format('embedded-opentype'),
         url('URL DE TU FUENTE.woff') format('woff'),
         url('URL DE TU FUENTE.ttf') format('truetype'),
         url('URL DE TU FUENTE.svg#nombredelafuente') format('svg');
    font-weight: normal;
    font-style: normal;
} 

*donde veis que dice URL DE TU FUENTE poned los links que habíais copiado en el block de notas. Fijaros en las extensiones pepito.SVG o pepito.TTF, cada uno en su sitio. Es muy fácil.

Usamos la fuente en nuestro blog!
Bien ya tenemos todo listo, ahora que tenemos la fuente la pregunta es, ¿dónde la usamos?
En el código que hemos usado decía en Font family: HOLASOYTUFUENTE. Ese es el nombre, la etiqueta, la marca registrada de nuestra fuente, así que allí donde la pongamos, se usara esa fuente. 

Ejemplo: si en las etiquetas (h1, h2, h3, h4) de nuestra plantilla le decimos en Font family que use HOLASOYTUFUENTE todos los elementos que usen esas etiquetas usaran esa fuente automáticamente.

Espero que os ayude esta guía y muuucha suerte.

12 comentarios:

  1. Hola!! Acabo de encontrar tu blog, y me parece que es un blog precioso y muy bueno, por eso me quedo por aquí. Además me gustaría sugerirte que te unieras al club Apadrina un blog, en el que yo ya participo, así poder amadrinarte, por que de verdad que me encanta tu blog. Si te interesa pásate por aquí

    Besos!!

    ResponderEliminar
    Respuestas
    1. Me interesa muchísimo enseguida me paso a apadrinar lo que haga falta :k Gracias!

      Eliminar
  2. He estado una temporada desbordada de acontecimientos y no sé porque no he visto un montón de entradas tuyas, de momento lo he arreglado añadiéndote en blogloving, pero estoy en ello. Que monadas has preparado de fondos y de todo.....

    ResponderEliminar
  3. NO ME GUSTÓ , FALTA DE IMAGENES HE INFORMACIÓN MUY MALA

    ResponderEliminar
    Respuestas
    1. Gracias por tu opinión.
      Sabías que escribir en mayúsculas significa que estás gritando? Son normas básicas a la hora de comunicarse por internet que se deberían saber y aplicar. Otra cosa es que si no te guste el tutorial, en ese caso búscate las cosas en otro blog, que hay miles de ayuda para blogger.
      Me parece de muy mal gusto ir a un blog y dejar un comentario como el tuyo, si no te gusta cierras la página y punto. Yo no voy a tu blog a comentar lo cutre que me parece el diseño o la falta de creatividad de tus entradas, sacadas de youtube en su mayoría.

      Lo dicho, gracias por dejarnos ver esa falta de respeto y afianzar una vez más que mucha de la gente que nos lee es bastante descerebrada.

      Eliminar
  4. Acabo de encontrar este tutorial (ya conocía el blog pero, por lo visto, no me he puesto al día con él). Me parece genial pero tengo problemas con la página Font Squirrel, cuando subo la fuente, se queda gestionando pero no me da resultado. He esperado bastante rato pero no me da los archivos. No sé si recientemente la has usado y puedes decirme si va bien. Gracias y enhorabuena.

    ResponderEliminar
    Respuestas
    1. Pues hace tiempo que no la he usado. ¿Has probado con otro navegador? Porque otras personas me han dicho que funciona bien la página

      Eliminar
  5. Lo estoy haciendo, pero justo justo al final, cuando ya estoy en blogger haciendo todo, no la veo....

    ResponderEliminar
  6. Buenas tardes.
    Me gustó la fuente que tienes en tu blog.
    Quisiera saber qué otra alternativa tengo a parte de Dropbox, pues por cuestiones de trabajo, esa la utilizo para documentos y videos. ¿Se podrían subir las fuentes en archivos públicos de OneDrive o Google Drive?
    Saludos desde Culiacán.

    ResponderEliminar
    Respuestas
    1. Claro que puedes.
      Además en Dropbox puedes hacer tantas carpetas como quieres podrías hacer una carpeta dedicada a archivos para tu blog y así no se mezclaría con lo que utilizas para el trabajo.

      Eliminar
  7. Hola

    En primera me ha encantado esta entrada pero tengo un problema veras, yo quiero que salga ese tipo de letra en mi menu desplegable que tengo como lo hago cual es el codigo para hacerlo posible o que parte de mi menu desplegable tengo que cambiar

    Aline

    ResponderEliminar
  8. Hola!!
    No sé si seguiras contestando preguntas a este blog puesto que es de hace tiempo, pero por si acaso... ahía va la mía: he seguido todos tus pasos pero a la hora de ver los resultados, veo que no me ha salido, por ello mi pregunta es ¿dónde tendría que poner el nombre de la fuente para que se viera en el texto de las entradas (no en el título del post, sino en el texto)? he probado en content, pero no me sale.
    Muchísimas gracias!!

    ResponderEliminar