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 utilizarla, 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 aparte.


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 recomiendo 3 sitios para descargar fuentes gratis, en donde puedes encontrar fuentes sin licencia o de libre uso. Esto es importante ya que también buscamos respetar los derechos del autor. Si ya contabas con las fuentes te recomiendo saltar a la parte de Subir fuentes.


Fontsquirrel

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.


Para descargar una fuente solo tenemos que buscar el botón "Download" o "Descargar" y pulsarlo, como se muestra en la siguiente captura:


descargar fuentes gratis de fontsquirrel

1001fonts

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.


Para descargar una fuente, solo busca el botón "Download" como se aprecia en esta captura de 1001fonts y la fuente que estoy descargando se llama Ethnocentric:


descargar fuentes gratis de 1001fonts

Fontspace

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.


Para descargar una fuente desde Fontspace solo pulsamos el botón "Download" y listo, eso es todo lo que debemos hacer:


descargar fuentes gratis de fontspace

Subir fuentes

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


descomprimir fuentes web

Ahora vamos a registrarnos en github y crear un nuevo repositorio. Si no sabes como hacerlo, puedes seguir los pasos de mi tutorial para usar github como hosting gratuito. Ya en el repositorio presiona el botón "upload files":


utilizar fuentes online

En la siguiente pantalla, arrastramos o seleccionamos desde nuestro ordenador las fuentes habíamos 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 ya listada entre nuestros archivos del repositorio, 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 staticaly y pegaremos el enlace copiado en el cuadro superior. Al hacerlo, staticaly nos proporciona un enlace, el cual podemos usar en producción así que lo copiamos:


cdn staticaly fuente enlace directo

Y Listo, ahora nuestra fuente se encuentra guardada en un espacio en la red proporcionado por github y staticaly 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 a el código css de nuestro blog. En el caso de este tutorial, el enlace que me devolvió staticaly es el siguiente:


https://cdn.staticaly.com/gh/Zero20659/danielhost/86a3ab1e/Amadeus-webfont.woff

Para utilizarlo usaremos la query @font-face de css, que nos permite utilizar fuentes web. 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 es 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 casi todos los navegadores. Reemplazando los datos nos quedaria asi:


@font-face {
   font-family: "Amadeus";
   src: url("https://cdn.staticaly.com/gh/Zero20659/danielhost/86a3ab1e/Amadeus-webfont.woff") format("woff");
}

Y con esto ya 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 clase 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">Este texto está en Amadeus</span>

Este sería el resultado de la fuente Amadeus que utilice para este tutorial:



Este texto está en Amadeus



Video tutorial

Nuestra amiga Monica Lemos de Blogger paso a paso ha explicado en un vídeo tutorial los pasos de este articulo, el cual recomiendo ver por si no ha quedado algo claro.



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


Conclusión

Aunque ya he realizado un aporte sobre como instalar fuentes de Google fonts, es mejor tener opciones y no limitarnos, por ello, la capacidad de subir la fuente que quieras amplira tus posibilidades a la hora de personalizar un blog.


Espero que este tutorial les haya sido de utilidad, cualquier duda dejenla en los comentarios, respondo a todos. Compártelo en tus redes sociales para ayudar a mas personas, es algo que siempre agradezco porque me ayuda mucho. Gracias por pasar.

Quizás te interese