Google Fonts es un recurso increíble. Antes de que estuviera tan extendido, crear sitios web que usaran fuentes únicas era un verdadero dolor de cabeza. Ahora, sin embargo, con unos pocos clics y un fragmento de código , su sitio web pasa de ser Helvetic-eh a Helvetic-awesome . Pero, ¿y si la fuente que amas no es parte de la familia Google Fonts? Necesitas saber cómo usar las fuentes descargadas porque has descubierto una fantástica fuente hipster que le habla al alma de tu barba .
Usar una fuente descargada en su sitio web no es tan simple como hacer clic, hacer clic, pegar, pegar. No es un proceso difícil, fíjate, y te guiaré a través de él para que nunca, nunca, nunca vuelvas a tener un sitio web de Helvetic-eh .
Ahora, quiero señalar que puede hacer esto a través de un complemento. Hay un puñado disponible en el repositorio. Pero, ¿por qué querríamos hacer eso? Soy el tipo de persona que prefiere evitar usar un complemento cuando unas pocas líneas de código harán lo mismo. El exceso de complementos causa toneladas de hinchazón, solicitudes HTTP innecesarias y ralentiza su sitio.
Así que vamos a importar estas fuentes a mano, como si fuera a finales de los 90 otra vez. Awww, sí.
Soy un gran admirador de los resúmenes de fuentes. Elegant Themes tiene una tonelada que puedes escanear para ver lo que te gusta. Así que golpea algunos de estos y mira lo que te gusta.
- Fuentes de escritura a mano
- Fuentes retro
- Fuentes de lujo
- Fuentes cursivas
- Fuentes Hipster
- Fuentes divertidas
En mi caso, me quedo con la tipografía Aventura de la colección Hipster .
Su primer paso es encontrar el enlace de descarga de la fuente y guardar el archivo en su computadora. Es probable que sea un archivo .zip que contenga varios formatos de archivo. Los más comunes que encontrarás son .ttf (Fuente TrueType) o .otf (Fuente OpenType).
Hacer una fuente web (algo opcional, pero no realmente)
FontSquirrel tiene una gran herramienta que puede usar para asegurarse de que nadie y ningún navegador quede incompatible con el esplendor de su sitio. Dado que la mayoría de las fuentes que descargue solo estarán disponibles en un formato único, la herramienta FontSquirrel lo hace para que no esté limitado por lo que distribuyó el autor de la fuente. Siempre que tenga los derechos para usar la fuente, puede asegurarse de que funcione con su producto/sitio.
Simplemente cargue su fuente descargada recientemente y elija sus opciones. Personalmente, uso las opciones de Experto , solo para obtener todos los formatos de fuente que puedo. Los otros funcionan, pero no obtienes tantos tipos de archivos, que es el objetivo de todo el asunto.
FontSquirrel también es increíble porque le proporciona el CSS necesario para importarlos a su sitio. ¿Cómo es eso de fácil de usar? Simplemente lo copiará y pegará (lo cual trataremos a continuación).
Subiendo tu fuente a WordPress
Una vez hecho esto, deberá cargar la fuente a su proveedor de alojamiento. Siempre hago esto a través de FTP ( uso FileZilla , pero puedes usar cualquier cliente que quieras).
Si no conoce la información FTP de su host , diríjase a su cPanel y busque en Archivos -> Cuentas FTP .
Allí verá todas las cuentas FTP del host y también debería ver un enlace Configurar cliente FTP al lado de cada una.
Cuando ingresa allí, cPanel le brinda información del servidor o un archivo FileZilla (y otros) que puede importar para configurar sus credenciales. Personalmente, prefiero el manual, pero tú haces lo que te gusta. Incluso si usa el archivo, necesitará la contraseña para iniciar sesión, por lo que ambos métodos son seguros.
Ahora que ha iniciado sesión en su host a través de FTP, vaya a la carpeta /wp-content de su sitio. Debido a que este es contenido para su sitio de WordPress, ¿por qué no lo pondría allí? Siéntete libre de ponerlo donde sea, incluso en /wp-content/uploads . Tú lo haces.
FTP es muy fácil de cargar su archivo. Simplemente busque el archivo de fuente que descargó y arrástrelo al panel inferior derecho en FileZilla. Eso comenzará la carga. No tardará más de un segundo en verlo en el directorio.
Si usó la herramienta FontSquirrel que discutimos anteriormente, también hará esto para todos los archivos de fuentes que descargó de ellos. Simplemente arrástrelos y suéltelos donde quiera almacenarlos.
Usando tu fuente con CSS
Su fuente ahora está cargada y acurrucada de forma segura en su cálida y cómoda manta de contenido wp. Es hora de agregar la importación de CSS necesaria a su tema.
Dirígete al directorio de tu tema secundario (estás usando un tema secundario , ¿verdad?) en tu cliente FTP y busca el archivo style.css , haz clic con el botón derecho y selecciona Ver/Editar para que aparezca en tu editor de texto predeterminado.
Si no tiene un tema hijo, use Orbisius Child Theme Creator para hacerlo ultrarrápido. Puede eliminar el complemento después. Me encanta esta cosa.
@Perfil delantero
El código que usamos proviene directamente de FontSquirrel (puede escribir el suyo propio o copiar/pegar el ejemplo a continuación), y todo lo que cambié fue la ruta de carga de la URL para incluir / wp-content . Todo lo demás es lo que proporcionó el generador de fuentes web.
Todo lo que hace este script @font-face es decirle a las hojas de estilo de su sitio web, «oye, amigo, voy a poner esta nueva fuente aquí si quieres usarla en algún momento». Ya sabes, algo así como cuando llevas cupcakes a casa y se lo dices a la gente con la que vives.
Sin @font-face , si intenta llamar a font-family: ‘aventurabold’; por CSS, su sitio no podrá encontrarlo porque nunca se le ha dicho dónde lo está guardando.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
@font-face { font-family: 'aventurabold'; src: url('/wp-content/aventura-bold-webfont.eot'); src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/wp-content/aventura-bold-webfont.woff2') format('woff2'), url('/wp-content/aventura-bold-webfont.woff') format('woff'), url('/wp-content/aventura-bold-webfont.ttf') format('truetype'), url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg'); font-weight: normal; font-style: normal;} |
Guarde el archivo y, dado que lo abrió para editarlo a través de FileZilla, obtendrá un diálogo que le preguntará si desea reemplazar el que está en el servidor. Tu respuesta es, obviamente, sí.
Ahora todo lo que tiene que hacer es ingresar a su custom.css (o si usa Divi , Divi -> Opciones de tema -> CSS personalizado en el panel de navegación de su panel de WP).
Simplemente agregue el estilo CSS como lo haría con cualquier otra fuente. Simplemente reemplacé las fuentes de Google ‘Roboto’ y ‘Exo’ que estaba usando con ‘aventurabold’ , y todo estuvo listo (gracias a la importación @font-face anterior).
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
body { font-family: "aventurabold", arial, sans-serif; font-size: 18px; line-height: 28px; color: #ffffff; text-transform: uppercase;}h1, h2, h3, h4, h5, h6 { color: #fff; font-family: 'aventurabold', sans-serif; font-weight: 700; text-transform: uppercase;} |
Los frutos de nuestro trabajo
Así es como se veía antes:
Y esto es lo que sucedió después de que agregué Aventura al CSS:
¡Hurra! ¡Funciona! ¡Buen trabajo! ¡Vamos!
Te ves bien, amigo
Como dijo una vez el capitán Malcolm Reynolds: «Hemos hecho lo imposible, y eso nos hace poderosos». Bueno, está bien, entonces cargar una fuente e importarla a través de CSS puede no equivaler a haber hecho lo imposible , pero ciertamente ha hecho algo que muchos usuarios de WordPress no se atreverían a hacer: agregar funcionalidad principal sin un complemento.
Y eso, mis amigos, ciertamente los hace poderosos.
Entonces, ¿cuál es tu fuente favorita para usar en la web que no sea una fuente de Google? ¡Cuéntame en los comentarios!
Imagen en miniatura del artículo de 32 Pixels / shutterstock.com