Añade Tu Tipografía En Tu Plantilla De Squarespace
Squarespace, tiene infinidad de tipografías, que puedes utilizar y que seguro hay más de una que quedan perfectas con tu estilo. Pero, ¿tienen todas las tipografías del mundo? No. ¿Te has enamorado de una tipografía concreta y que no está en Squarespace? No te preocupes hoy lo solucionamos.
Antes de empezar, hoy voy a introducir un poquito de código ¡que no cunda el pánico! Te lo voy a dejar todo súper sencillo para que puedas hacerlo como una EXPERTA y sin sufrir. Así que sigue leyendo que no es necesario que sepas de código, de esto me encargo yo.
PRIMER PASO:
Ten el archivo de tu tipografía web a mano porque lo vamos a necesitar. Idealmente, el formato de tu archivo debe ser .ttf o .otf. Asegúrate que la licencia de tu tipografía te permite utilizarla en web.
¿Hasta aquí sencillo verdad? Pues vamos a por el segundo paso.
SEGUNDO PASO:
Subir tu archivo en Squarespace. Entra dentro de tu página desde el editor de Squarespace. Una vez estás dentro ves a Diseño > CSS personalizado, luego ves al final del todo y haz clic en Gestionar archivos personalizados.
Haz clic y verás que dice “Añade imágenes o fuentes”.
Y… tu intuición es correcta, sube allí el archivo de la fuente.
TERCER PASO:
Una vez tengas tu tipografía subida debes ver algo estilo a esto:
Ahora ya solo tienes que añadir un poco de código CSS y tu tipografía ya estará activa en tu página de Squarespace.
Lo primero copia y pega este código de aquí a bajo:
@font-face {
font-family: 'NOMBRE-TIPOGRAFIA';
src: url('copia aquí el URL de tu tipografía.ttf') format('truetype');
}
Cambia “NOMBRE-TIPOGRAFIA” por el nombre de tu tipografía. Por ejemplo, en mi caso seria Strings.
Ahora solo nos queda introducir el URL de tu tipografía. Para poder añadirlo, haz clic en Gestionar archivos personalizados otra vez y haz un clic encima de la tipografía que has subido previamente. Una vez haces clic, automáticamente, veras tu URL copiada en el espacio de Código CSS. Copia esta URL en el espacio correcto y entre las comillas.
Tu código debe ser algo así:
Indica guardar en el botón de arriba a la izquierda, porque… ¡FELICIDADES! ya has añadido tu tipografía a tu web de Squarespace.
Ya estas a solo un paso de terminar y estoy segura de que no ha sido tan complicado como imaginabas.
CUARTO PASO:
Ahora ya solo te queda un pequeño detalle, indícale a donde quieres que utilice la fuente, en los títulos, en los párrafos… Para ello, necesitas introducir otro pequeño código (aún más sencillo que el anterior).
Copia y pega el siguiente código, debajo del código que ya has introducido:
h1 {
font-family: ‘NOMBRE-TIPOGRAFIA’ !important;
}
Cambia “NOMBRE-TIPOGRAFIA” por el nombre de tu tipografía. Por ejemplo, en mi caso seria Strings. Y automáticamente el título más grande de tu web se verá con esta tipografía. Si quieres utilizar esta tipografía para títulos más pequeños cambia el “h1” por h2 o h3. Si lo que quieres es cambiar la tipografía del texto principal, cambia “h1” por “p”.
¡ENHORABUENA! Lo has conseguido 😃 ahora ya puedes tener tu propia tipografía en Squarespace y puedes tener una marca consistente en todas tus comunicaciones.
👇🏼 Si te ha gustado la publicación, guárdala en tu cuenta de Pinterest 👇🏼
