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.
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.
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:
- nombre de fuente-webfont.eot,
- nombre de fuente-webfont.svg,
- nombre de fuente-webfont.ttf,
- nombre de fuente-webfont.woff,
- hoja de estilo.css
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.
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.
Vea cómo hacer esto como video de YouTube y cómo cambiar la fuente en cualquier tema de WordPress.
25 fuentes más populares en Font Squirrel
Si está buscando inspiración para usar una fuente, aquí están las 25 fuentes más populares en Font Squirrel en este momento.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
¿Cuál es la fuente más popular en este momento?
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.
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.
y muchos más ...