Como alojar fuentes web sin pagar hosting

Como alojar fuentes web gratis Como alojar fuentes web sin pagar hosting

Puede que hayas conseguido la fuente perfecta para tu blog, pero te encuentras con el dilema de no poder utilizarlas, sobre todo si la plataforma que usas es Blogger, pues como sabemos, Blogger no permite subir archivos a menos que agregues un servicio de alojamiento web.


El día de hoy y en colaboración con nuestra amiga Monica Lemos de Blogger paso a paso, aprenderemos a alojar cualquier fuente gratis y usarlas en nuestro blog, todo de forma legal claro.


Encontrar fuentes

Primero vamos a encontrar el tipo de letra que queremos utilizar, para ello les facilitaré 3 sitios recomendados para descargar fuentes gratis, en donde puedes encontrar fuentes sin licencia o de libre uso. Esto es importante ya que también buscamos respetar la licencia del autor. Si ya contabas con las fuentes te recomiendo saltar a la parte de Subir fuentes.


  • Fontsquirrel - Mi página favorita para descargar fuentes. Fontsquirrel nos sirve para encontrar fuentes personales o de uso comercial. También proporciona el formato woff, que sirve para usarse en páginas web.
  • 1001fonts - Muy bueno también para encontrar fuentes, aunque en este caso las de uso personal y comercial están mezcladas, así que sugiero filtrar las fuentes dependiendo del uso que le daremos.
  • Fontspace - Cuenta con una colección muy completa de mas de 30.000 fuentes y un gran número de categorías. Al igual que con 1001fonts, si necesitamos fuentes de libre uso, seleccionaremos la categoría "Comercial". Si no le daremos uso comercial, entonces filtramos las de uso personal.

El método de descarga es igual en las tres plataformas que he mencionado, solo tenemos que buscar el botón "Download" o "Descargar" y pulsarlo. En la siguiente captura descargo la fuente "Abel" desde fontsquirrel:


descargar fuentes gratis de fontsquirrel

La siguiente captura corresponde a 1001fonts y la fuente que estoy descargando se llama "Ethnocentric":


descargar fuentes gratis de 1001fonts

Por último, esta captura pertenece a fontspace y la fuente se llama "Regensburg", por el diseñador Vladimir Nikolic, solo pulsamos el botón "Download":


descargar fuentes gratis de fontspace

Al finalizar la descarga, nos encontraremos con un archivo comprimido. Solo debemos utilizar algún descompresor como por ejemplo winrar, le damos clic derecho y seleccionamos "extraer":


descomprimir fuentes web

Eso seria todo, con esto ya tendremos la carpeta que incluye nuestra fuente lista para utilizar.


Subir fuentes

Primero que todo vamos a registrarnos en github y crear un nuevo repositorio. Si no sabes como hacerlo, puedes seguir los pasos que indiqué en mi tutorial sobre cómo usar github como hosting gratuito. Una vez cuentes con el repositorio y te encuentres en el mismo, presiona el botón "upload files":


utilizar fuentes online

En la siguiente pantalla, arrastramos o seleccionamos desde nuestro ordenador, las fuentes que ya habíamos descargado y descomprimido. Escribimos un comentario en donde se muestra en la siguiente captura y presionamos el botón "Commit changes":


subir fuentes gratis github

Al terminar, nos encontraremos nuevamente en nuestro repositorio, con la fuente listada entre nuestros archivos en github, simplemente le damos un clic y en la siguiente pantalla damos clic derecho al boton download y seleccionamos "copiar dirección de enlace":


clic derecho copiar enlace github

Por ultimo vamos a visitar rawgit.com y pegaremos el enlace copiado en el cuadro superior. Al hacerlo rawgit nos devolverá 2 enlaces en la parte inferior, el izquierdo es el que podemos usar en nuestro blog, así que copiamos ese:


cdn rawgit fuente enlace directo

Y Listo, ahora nuestra fuente se encuentra guardada en un espacio en la red proporcionado por github y rawgit nos permite acceder a ella para darle uso. También podemos repetir el proceso para todas las fuentes que hayamos subido.


Utilizar las fuentes

Ahora vamos a incluir la fuente que acabamos de subir en el código css de nuestro blog, lo que nos permitirá darle uso. En el caso de este tutorial, el enlace que me devolvió rawgit es el siguiente:


https://cdn.rawgit.com/Zero20659/danielhost/410a2cd8/Amadeus-webfont.woff

Para utilizarlo usaremos la regla @font-face de css, que nos permite utilizar fuentes personalizadas. En el caso de Blogger, vamos a temas, presionamos el botón Editar HTML y arriba de ]]></b:skin> pegaremos el código css que explicare a continuacion:


@font-face{ 
   font-family: 'Mi fuente';
   src: url('WebFont.eot');
   src: url('WebFont.eot?iefix') format('eot'),
        url('WebFont.woff') format('woff'),
        url('WebFont.ttf') format('truetype');
}

Para empezar, 'Mi fuente' se reemplaza por el nombre que queramos darle a nuestra fuente, lo mas normal seria darle el nombre original para no crear confusión. Mientras que en 'WebFont.eot', 'WebFont.woff' y 'WebFont.ttf' Se reemplazan por las urls de las fuentes con su respectivo formato.


Subir todos los formatos mejora la compatibilidad con navegadores viejos, pero no es necesario. Tanto ttf como woff son los formatos más soportados. Recomiendo utilizar woff ya que se visualiza correctamente en la mayoría de navegadores. Reemplazando los datos nos quedaria asi:


@font-face {
   font-family: "Amadeus";
   src: url("https://cdn.rawgit.com/Zero20659/danielhost/410a2cd8/Amadeus-webfont.woff") format("woff");
}

Listo, hemos logrado instalar una fuente personalizada y ahora ya podemos hacer uso de la misma usando la propiedad "font-family". Por ejemplo, aquí he aplicado el tipo de fuente "Amadeus" a la classe amadeus:


.amadeus {
  font-family: "Amadeus";
  font-size: 20px;
}

Ahora solo necesitamos incluir esa clase en una etiqueta html como se muestra en el siguiente ejemplo:


<span class="amadeus">Mi fuente personalizada</span>

Y desde ahora nuestra fuente comenzará a aplicarse cuando el usuario visite el blog. Este sería el resultado de la fuente Amadeus que utilice para este tutorial:



Mi fuente personalizada



Video tutorial

Si alguno de los pasos redactados en este tutorial no te quedaron del todo claro, nuestra amiga Monica Lemos de Blogger paso a paso los ha explicado en un vídeo tutorial, el cual recomiendo y te dejo a continuación.



Tambien te recomiendo pasarte por su video en youtube y por su articulo relacionado a Instalar fuentes externas o personalizadas en Blogger, muy recomendado.


Conclusión

Aunque ya he realizado un aporte sobre como instalar fuentes de Google fonts y este mismo servicio cuenta con tipografías geniales, es mejor tener opciones y no limitarnos, por ello, la capacidad de subir la fuente que quieras te dará mayor libertad de personalización.


Espero que este tutorial les sirva amigos, cualquier duda dejenla en los comentarios, respondo a todos. Compártelo en tus redes sociales para ayudar a mas personas, yo lo agradecere mucho tambien. Gracias por pasar.

Quizás te interese