🐿️ Font Squirrel: 25 fuentes populares + cómo agregarlas a un sitio [5 pasos]

ardilla de fuente

Gracias a sitios como Font Squirrel, puede utilizar cualquier tipo o estilo de fuente que desee en un sitio web. Las opciones solían estar limitadas a unas pocas fuentes web estándar que todo el mundo tenía que utilizar. Hoy en día hay muchas más opciones disponibles. Ya no está restringido a unas pocas fuentes compatibles con la web. Ahora, las fuentes se pueden descargar sobre la marcha simplemente accediendo a un sitio web.

Los sitios web como Font Squirrel, con acceso a cientos y miles de elementos, son muy populares. Su generador de fuentes web hace que sea más fácil que nunca el uso de presentaciones de terceros, así como creaciones seleccionadas.

En lugar de utilizar tipos de letra estándar como Arial, Calibri y Helvetica Neue, podemos utilizar la regla CSS @ font-face. Esto nos permite utilizar cualquier fuente sin tener que instalarla en los dispositivos de los visitantes. Esta es una excelente opción que brinda libertad de expresión para el diseñador del sitio web y máxima usabilidad para el usuario.

Leer más: Cómo aprender CSS (Revista Smashing)

Esto ha hecho que sea extremadamente fácil agregar Font Squirrel y cualquier otro tipo de letra que elija a su sitio.

En este tutorial, le mostraremos cómo usar Font Squirrel en su sitio web. Puede usar el mismo concepto para agregar cualquier tipo de letra a su sitio, incluido FontAwesome. 

Agregue Font Squirrel a su sitio web

1. Busque la fuente FontSquirrel que desee

  • Visite Font Squirrel y seleccione Buscar para buscar la fuente que desea agregar.
  • Seleccione el que le gustaría usar en su sitio web como parte de su diseño web. Puede usar las diversas categorías para encontrar el tipo de letra que le gustaría usar, encontrar las adiciones más populares, recientemente agregadas, populares o de tendencia. Hay miles para elegir. Seleccione el que mejor se adapte al proyecto en el que está trabajando.

 encontrar fuentes fuentes ardilla

 

2. Descarga el kit Font Squirrel WebFont

  • Una vez que haya seleccionado la fuente que desea utilizar, haga clic en el botón WebFont Kit en la parte superior derecha de la pantalla.
  • Haga clic en Descargar @ font-face kit.

kit de fuentes web de descarga de fontsquirrel

 

fontsquirrel descargar font face kit

 La descarga contendrá un archivo zip con varios archivos, incluido cómo usar la fuente web, las licencias asociadas con este tipo de letra Font Squirrel y, por supuesto, el archivo en sí.

3. Sube los archivos de Font Squirrel a tu sitio.

  • Extraiga el archivo: se extraerá a una carpeta con el nombre del elemento que eligió.
  • Sube TODOS los archivos a la carpeta CSS de tu sitio web. Tendrá una serie de archivos que deberá cargar, incluidos:
  1. nombre de fuente-webfont.eot,
  2. nombre de fuente-webfont.svg,
  3. nombre de fuente-webfont.ttf,
  4. nombre de fuente-webfont.woff,
  5. hoja de estilo.css

 

archivos de carga de ardilla de fuente

 

4. Agrega el tipo de letra a tu hoja de estilo CSS.

El paso final variará un poco según cómo se utilicen las fuentes en su sitio. Encontrarás las definiciones de tipo de letra en el archivo CSS. El archivo debe llamarse hoja de estilo.css. Debería encontrar el archivo CSS utilizado en su sitio y agregar allí los archivos Font Squirrel usando lo siguiente. Agregue lo siguiente a su archivo stylesheet.css, reemplazando:

@font-face {
    font-family: 'FontName';
    src: url('FontName-webfont..eot');
    src: url('FontName-webfont..eot?#iefix') format('embedded-opentype'),
        url('FontName-webfont.woff') format('woff'),
        url('FontName-webfont.ttf') format('truetype'),
        url('FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Si ha subido las fuentes a la carpeta TYPES, el código cambiará muy levemente a:

@font-face {
    font-family: 'FontName';
    src: url('types/FontName.eot');
    src: url('types/FontName.eot?#iefix') format('embedded-opentype'),
        url('types/FontName-webfont.woff') format('woff'),
        url('types/FontName-webfont.ttf') format('truetype'),
        url('types/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

5. Cambie las declaraciones CSS para usar los elementos FontSquirrel agregados 

Una vez que haya agregado las declaraciones anteriores a la hoja de estilo, deberá editarla un poco más para usar el tipo de letra. Después de agregar el código anterior, debe editar más la hoja de estilo para usar los nuevos tipos que ha agregado.

Haga esto cambiando la familia de fuentes por el nombre de la opción que ha elegido. Por ejemplo, si desea utilizar el nuevo tipo con sus encabezados, busque el CSS del encabezado y luego cámbielo en consecuencia. 

encontrar la familia de fuentes actual

Actualice la declaración CSS con el nombre de FontSquirrel que ha descargado.

h1,h2,h3,h4,h5,h6 {
    color: #444;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

 ¡Por supuesto, puede usar la familia de fuentes en cualquier etiqueta CSS que necesite!

Si ha seguido todos los pasos anteriores correctamente, una vez que vuelva a cargar la hoja de estilo, ¡debería tener la nueva fuente Font Squirrel que acaba de agregar a su sitio web!

De lo contrario, simplemente abra las herramientas de desarrollo de su navegador para verificar si se está accediendo correctamente a todos los archivos. Si no es así, vuelva a revisar su CSS para asegurarse de haber escrito correctamente el nombre de la fuente. 

Si está buscando inspiración para usar una fuente, aquí están las 25 fuentes más populares en Font Squirrel en este momento.

Montserrat

1. montserrat

Montserrat es una fuente urbana moderna disponible en varios pesos. Funciona de cerca y a distancia y podría funcionar bien en la web.

https://www.fontsquirrel.com/fonts/montserrat

Sin abiertas

2. Sin abiertas

Open Sans no debería necesitar presentación. Es una de las fuentes más populares del mundo y es limpia, moderna y flexible.

https://www.fontsquirrel.com/fonts/open-sans

Roboto

3. Roboto

Roboto es otra fuente web inmensamente popular gracias a sus líneas limpias, apariencia sencilla y flexibilidad.

https://www.fontsquirrel.com/fonts/roboto

Raleway

4. Raleway

Raleway es similar en apariencia a Roboto pero también es único. Otra fuente limpia y ligera que funcionaría bien en cualquier situación.

https://www.fontsquirrel.com/fonts/raleway

Lato

5. lato

Lato tiene casi 10 años de existencia gracias a su efectividad, apariencia moderna y gran equilibrio.

https://www.fontsquirrel.com/fonts/lato

Bebas Neue

6. Bebas Neue

Bebas Neue es una interpretación de la fuente gratuita Bebas Neue original de Ryoichi Tsunekawa. Es una fuente muy atractiva que es inmensamente popular.

https://www.fontsquirrel.com/fonts/bebas-neue

Poppins

7. Poppins

Poppins es una fuente ligera y desenfadada con un gran equilibrio. También es completamente moderno, lo que significa que podría funcionar en muchos diseños.

https://www.fontsquirrel.com/fonts/poppins

Buenas vibraciones

8. Grandes vibraciones

Great Vibes es una fuente fluida de estilo de escritura a mano que aún es legible en diferentes tamaños de pantalla. Esto se presta bien para ser utilizado en diseños de lujo.

https://www.fontsquirrel.com/fonts/great-vibes

Cepillo de alex

9. Pincel Alex

Alex Brush es otro guión de pincel manuscrito fluido que es legible en diferentes tamaños de pantalla. Es una versión más relajada del tema con un atractivo definido.

https://www.fontsquirrel.com/fonts/alex-brush

Arena movediza

10. Arenas movedizas

Las arenas movedizas son ligeras y caprichosas y tienen una sensación de amplitud. Una mezcla de moderno y caprichoso, la fuente podría ser ideal en una variedad de diseños web.

https://www.fontsquirrel.com/fonts/quicksand

Oswald

11. Oswald

Oswald es una fuente más pesada y enfática que tiene una gran legibilidad a diferentes distancias. También es sencillo y moderno, lo que funciona bien.

https://www.fontsquirrel.com/fonts/oswald

Fuente Sans Pro

12. Fuente Sin Pro

Source Sans Pro es una evolución de una de las primeras fuentes de código abierto de Adobe. Se ha ido modificando y mejorando constantemente, siendo este uno de los mejores ejemplos.

https://www.fontsquirrel.com/fonts/source-sans-pro

Exhibición de Playfair

13. Exhibición de Playfair

Playfair Display es una fuente más tradicional con un toque moderno. Está bien equilibrado y podría funcionar en todo tipo de situaciones.

https://www.fontsquirrel.com/fonts/playfair-display

batido de leche

14. Batido

Milkshake es una fuente más pesada con un tema estadounidense. Inicialmente se dibujó con un pincel antes de convertirlo en una fuente.

https://www.fontsquirrel.com/fonts/milkshake

Kaushan Script

15. Escritura de Kaushan

Kaushan Script tiene un elemento asiático que evoca visiones de Saigón en la década de 1930. Es una fuente agradable con un gran atractivo.

https://www.fontsquirrel.com/fonts/kaushan-script

trozocinco

16. Trozo cinco

Chunkfive es un nombre descriptivo para esta fuente gruesa. Es una fuente en negrita que tiene un impacto y podría funcionar bien para titulares o títulos.

https://www.fontsquirrel.com/fonts/chunkfive

amatic

17. Amático

Amatic recuerda a la escritura en pizarrón o Los Simpson, pero tiene un carácter propio. Podría funcionar bien en less sitios web formales.

https://www.fontsquirrel.com/fonts/amatic

Allura

18. Allura

Allura es otra fuente manuscrita fluida que es muy agradable a la vista. Una consideración cuidadosa podría hacer un gran uso de esta fuente.

https://www.fontsquirrel.com/fonts/allura

Liga espartana

19. Liga Spartan

League Spartan es una fuente sensata que tiene mucha presencia. Podría funcionar perfectamente como titular o dentro de una llamada a la acción.

https://www.fontsquirrel.com/fonts/league-spartan

Metrópoli

20. Metrópolis

Metropolis es una fuente geométrica moderna que obviamente ha sido influenciada por algunas de las fuentes más populares. Esta es una gran interpretación.

https://www.fontsquirrel.com/fonts/metropolis

Pacifico

21. Pacífico

Pacifico es una fuente fluida y alegre que evoca pensamientos de Pepe jeans y los Estados Unidos de los años sesenta. Es una fuente eficaz en un entorno histórico.

https://www.fontsquirrel.com/fonts/pacifico

Aller

22. Aller

Aller es un diseño limpio, ligero y moderno cuyo angular La apariencia se adapta bien al diseño web moderno.

https://www.fontsquirrel.com/fonts/Aller

Josefin Sans

23. Josefina Sans

Josefin Sans logra combinar la modernidad con la herencia y podría ser una fuente muy flexible en una amplia gama de diseños.

https://www.fontsquirrel.com/fonts/josefin-sans

negro Jack

24 Gato negro

Black Jack es una fuente fluida con una apariencia informal. Podría funcionar bien en diseños relajados, cómicos o relajados.

https://www.fontsquirrel.com/fonts/blackjack

Langosta

25. Langosta

La langosta tiene la apariencia de una marca, tal vez Nueva Inglaterra o en algún lugar junto al mar. Una gran fuente para usar si el diseño se adapta.

https://www.fontsquirrel.com/fonts/Lobster

Preguntas frecuentes

¿Qué es Font Squirrel?

Font Squirrel es un repositorio de fuentes web de creadores de código abierto y gratuito. Todas las fuentes se pueden descargar y utilizar de forma gratuita, incluso con fines comerciales.

¿Cómo descargo fuentes web de Font Squirrel?

Descargar fuentes web de Font Squirrel es fácil. Identifique la fuente que desea utilizar, descargue el archivo que contiene la fuente. Sube los archivos a tu servidor web e incluye el nombre de la fuente en tu stylesheet.css. Luego prueba para asegurarte de que tu fuente se cargue.

La fuente más popular en este momento es Helvetica. Según Wired, Helvetica es la fuente más popular del mundo a pesar de tener 62 años..

¿Cuál es la fuente más moderna para usar?

Además de Helvetica, las fuentes más modernas para usar según Lifehack incluyen Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni y Didot.

¿Cómo usar la fuente ardilla?

Después de descargar el tipo de letra que desea usar, puede cargarlo en su sitio web y luego crear el CSS con el tipo de letra según las instrucciones anteriores para incluir este tipo de letra en su sitio web.

Sobre la autora
David Atard
Autor: David AtardPagina Web: https://www.linkedin.com/in/dattard/
David ha estado trabajando en o alrededor de la industria digital / en línea durante los últimos 18 años. Tiene una vasta experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Como consultor digital, su enfoque es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y plataformas digitales disponibles en la actualidad.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Haga deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...