Cómo agregar fuentes y tipos de Font Squirrel a su sitio web en 5 sencillos 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. fontname-webfont.eot,
  2. fontname-webfont.svg,
  3. fontname-webfont.ttf,
  4. fontname-webfont.woff,
  5. stylesheet.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 stylesheet.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. Alex Brush

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

Chunkfive

16. Chunkfive

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. Amatic

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. Josefin 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 de Empleadores

¬Ņ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?

Aparte de Helvetica, las fuentes m√°s modernas para usar seg√ļn Lifehack incluyen Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni y Didot.

 

 

Sobre el autor
David Attard
Autor: David AttardPagina 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? ;-)
Por favor 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 ...