Guía de fuentes de Squarespace: cómo cambiar las fuentes, los colores y los tamaños
Squarespace te permite personalizar fácilmente las fuentes, los colores y el tamaño del texto de tu página web mediante el panel «Estilos de la página ».
A continuación te explicamos cómo hacerlo paso a paso.
Paso 1: Abre el panel «Estilos del sitio»
Aquí es donde realizarás todos los cambios de diseño.
Cómo acceder a los estilos del sitio:
Ve al editor de tu página web (inicia sesión y haz clic en tu sitio).
Haz clic en el icono del pincel (esquina superior derecha del editor).
O bien, ve a «Diseño > Estilos del sitio » en el menú principal.
Esto abre el panel «Estilos del sitio», donde puedes ajustar las fuentes, los colores y otros parámetros de diseño.
Paso 2: Cambiar las fuentes
Puedes elegir un paquete de fuentes (estilos prediseñados) o seleccionar las fuentes manualmente.
Opción 1: Utilizar un paquete de fuentes (rápido y fácil)
Haz clic en «Fuentes » en el panel «Estilos del sitio».
Haz clic en «Cambiar paquete de fuentes» (verás diferentes combinaciones de fuentes).
Elige la que más te guste: se aplicará automáticamente a los títulos, los párrafos y mucho más.
Haz clic en «Guardar » cuando estés satisfecho con tu selección.
Opción 2: Personalizar las fuentes manualmente
Ve a «Estilos del sitio» > «Fuentes»
Haz clic en el tipo de texto que quieras modificar (encabezados, párrafos, botones, etc.)
Haz clic en el nombre de la fuente para abrir el selector de fuentes.
Explora o busca una fuente (Squarespace admite más de 1.600 fuentes de Google y Adobe).
Haz clic en una fuente para aplicarla.
Guarda los cambios.
💡 Consejo de experto: Puedes configurar diferentes tipos de letra para los encabezados (H1, H2, H3, etc.) y los párrafos (P1, P2, P3).
Squarespace es compatible con las fuentes web de Google y Adobe. Google Fonts ofrece más de 1.000 fuentes diferentes, de las cuales Squarespace admite unas 600. Adobe Fonts cuenta con 2.300 fuentes diferentes en su biblioteca, de las cuales Squarespace ofrece 1.000. ¿A qué se debe esta limitación? No estoy seguro. Puede que ofrezcan acceso completo y que Squarespace simplemente no haya actualizado las cifras que indican como compatibles, ya que antes había menos fuentes en las bibliotecas.
Cabe mencionar que, dado que Google y Adobe son empresas externas, a veces modifican sus servicios sin previo aviso. Pueden eliminar fuentes, independientemente del número de personas que las utilicen. Cuando esto ocurra, la fuente seguirá funcionando en tu sitio web, pero si decides cambiarla, no podrás volver a la anterior si la nueva no te convence. Afortunadamente, hay miles de fuentes disponibles, y muchas de ellas se parecen lo suficiente entre sí como para que probablemente puedas encontrar un sustituto adecuado. Eso en el caso de que te encuentres en esta situación concreta, algo que es poco probable que ocurra.
Si sabes qué fuente concreta quieres utilizar, puedes buscarla por su nombre. Si no sabes cómo se llama una fuente, puedes echar un vistazo a las fuentes disponibles para encontrar una que te guste.
Squarespace no ofrece acceso ilimitado a todas las fuentes desde el primer momento. Destaca unas cuantas fuentes para ofrecerte unas opciones iniciales. Entre estas opciones se incluyen algunas fuentes populares, así como aquellas que hayas elegido utilizar recientemente o que hayas añadido a tu sitio web en otras secciones.
Haz clic aquí para saber cómo añadir fuentes personalizadas a tu sitio web de Squarespace 7.1
Paso 3: Ajustar el tamaño de la fuente y los estilos de texto
Una vez elegidas las fuentes, es posible que quieras ajustar el tamaño, el grosor o el espaciado.
Cómo cambiar el tamaño de la fuente:
Abrir «Estilos del sitio» > «Fuentes»
Haz clic en el tipo de texto que quieras ajustar (encabezados, párrafos, etc.)
Busca el control deslizante de tamaño y arrástralo para aumentar o reducir el tamaño del texto.
Ajusta el resto de parámetros si es necesario:
Grosor de la fuente (normal, negrita, negrita extra, etc.)
Altura de línea (espacio entre líneas)
Espaciado entre letras (Ajusta el espacio entre las letras)
Transformación de texto (mayúsculas, minúsculas o estilo con la primera letra en mayúscula)
Cuando hayas terminado, haz clic en «Guardar ».
💡 Consejo: Previsualiza siempre los cambios en el móvil y en el ordenador para asegurarte de que se ven bien.
Ajustar los colores de la página web
A partir de la versión 7.1 de Squarespace, ya no tienes que gestionar los colores de forma individual, seleccionando elementos concretos y aplicándoles colores con la esperanza de que todo quede bien y mantenga la coherencia en los distintos tipos de páginas. En su lugar, eliges temas de color, que son paletas de colores que combinan entre sí y aplican colores a los distintos elementos de tu sitio web de forma generalizada. Aunque pueda parecer menos flexible, es tan personalizable como antes, solo que de otra manera.
Paso 4: Cambiar los colores de la página web
Squarespace 7.1+ utiliza un sistema de paleta de colores para garantizar un estilo coherente en todo el sitio web.
Cómo cambiar los colores de tu página web:
Abrir «Estilos del sitio» > «Colores»
Haz clic en «Editar paleta»
Elige tu combinación de colores:
Utiliza una paleta predefinida (conjuntos de colores ya preparados).
Extraer colores de una imagen (sube una imagen y Squarespace generará colores a partir de ella).
Elige un color principal y deja que Squarespace cree una paleta a juego.
Selecciona manualmente los colores con el selector de colores (si tienes colores específicos de la marca).
Guarda tu paleta: esto actualiza los colores en toda la web.
Paso 5: Cambiar los colores de secciones concretas
Cada sección de tu página web tiene un tema de color (claro, oscuro, brillante, etc.). ¡Puedes personalizarlos!
Cómo cambiar los colores de una sección:
Mientras editas una página, pasa el cursor por encima de una sección y haz clic en «Editar sección».
Haz clic en la pestaña «Colores » en la configuración de la sección.
Elige un tema de colores (Squarespace aplicará los colores a juego de tu paleta).
Guarda los cambios.
💡 ¿Necesitas más control? Puedes editar colores concretos dentro de un tema de color:
Abrir «Estilos del sitio» > «Colores»
Haz clic en un tema de color (como «Bright 2» o «Dark 1»).
Ajusta elementos concretos (fondo, texto, botones, etc.).
Guardar: se actualizarán todas las secciones que utilicen ese tema.
Modificaciones en la versión 7.0
Todo lo que he escrito anteriormente se refiere a Squarespace 7.1. He pensado que, dado que es la versión más reciente y mucha gente todavía se está adaptando a ella y aprendiendo cómo funciona, es ahí donde surgen la mayoría de las dudas más habituales.
En el caso de los sitios de la versión 7.0, todo es más complicado, pero, además, la mayoría de la gente ya sabe cómo hacerlo. Dado que la versión 7.0 ha sido la predeterminada durante años, el conocimiento sobre cómo personalizar un sitio está más arraigado. Aun así, quizá merezca la pena tratarlo brevemente.
Para cambiar las fuentes en la versión 7.0, hay que tener en cuenta el tema que estés utilizando, las fuentes que admita y el proceso que sigas para seleccionarlas. Elige una plantilla de página que quieras editar, haz clic en «Diseño», selecciona «Estilos» y allí encontrarás todas las opciones de fuentes.
La elección de una fuente concreta funciona de manera muy similar, pero se aplica de forma individual para cada tipo de página. Si quieres cambiar el aspecto del texto de los párrafos del cuerpo en las diferentes páginas de tu sitio web, tendrás que cambiar la fuente en cada tipo de página. Puedes seguir utilizando el mismo tipo de menú desplegable de «familia de fuentes» para buscar fuentes por nombre o incluso realizar una búsqueda (si sabes qué fuente quieres utilizar).
También puedes optar por utilizar la opción de fuentes personalizadas para añadir una fuente de Adobe que Squarespace no admita de forma predeterminada. Si decides hacerlo, ten en cuenta que es posible que algunas de las configuraciones de Squarespace, como las transformaciones, no funcionen correctamente con ella y que tengas que utilizar CSS personalizado para conseguir el resultado deseado. Dicho esto, dada la amplia variedad de opciones de fuentes disponibles, no es habitual que la gente quiera utilizar CSS solo para añadir una fuente diferente, salvo en circunstancias extremas, limitadas y personalizadas. Si quieres explorar los valores CSS, Mozilla ha elaborado una guía estupenda sobre el tema.
Para añadir una fuente personalizada, tiene que ser una fuente de Adobe (las fuentes de Google no funcionan) y debes utilizar la sección de fuentes personalizadas para hacerlo. Encontrarás las instrucciones en esta página. Básicamente, necesitas tener una suscripción a Adobe Creative Cloud y vincular esa cuenta con Squarespace. A continuación, podrás elegir una selección personalizada de fuentes de Adobe, que sustituirán a las fuentes disponibles en los estilos actuales de tu sitio web. Ten cuidado si las utilizas para otros fines en tu sitio web; no querrás sobrescribir las fuentes que ya utilizas.
Desde este menú también se pueden realizar pequeños ajustes en el texto.
Tamaño de la fuente: cambiar el tamaño del elemento de fuente en la página.
Altura de línea: modifica el espacio entre líneas en sentido vertical. Ten cuidado al utilizar 0 em, ya que puede provocar que el texto se superponga.
Espaciado entre letras: el espacio que hay entre las letras. Es similar al kerning, pero no es exactamente lo mismo.
Transformación de texto: elegir si el texto se puede escribir con mayúsculas a medida que se teclea, o si, por defecto, se escribe todo en mayúsculas, todo en minúsculas o con mayúsculas según las normas habituales.
Decoración del texto: añadir elementos al texto, como líneas superiores, subrayados o tachados.
Alineación del texto: alineación a la izquierda , a la derecha o centrada.
No es exactamente la misma selección de opciones, pero se acerca bastante.
Cambiar los colores de tu sitio web funciona prácticamente igual en la versión 7.0 que en la 7.1. La principal diferencia es que los colores se eligen por página, en lugar de por sitio web. Por lo tanto, si quieres cambiar los colores en todo el sitio web, tendrás que realizar el ajuste de color en cada página. Aquí puedes leer más sobre los ajustes de color individuales que puedes realizar y cómo llevarlos a cabo.
En general, Squarespace 7.1 ha hecho mucho por agilizar y eliminar esas pequeñas repeticiones molestas que eran inherentes a los sistemas de personalización de fuentes y colores. Todo ello forma parte de la optimización de sus temas, pasando de familias de temas individuales a un único tema centralizado con variaciones y ajustes modulares. Sin duda, supone un cambio, pero esta simplificación es bienvenida.
Resumen (guía rápida)
✅ Cambiar fuentes:
Ve a «Estilos del sitio» > «Fuentes», elige un paquete de fuentes O selecciona las fuentes manualmente.
✅ Ajustar el tamaño y el estilo de la fuente:
En «Estilos del sitio» > «Fuentes», utiliza el control deslizante de tamaño y ajusta el grosor, el espaciado y el estilo.
✅ Cambiar colores (en todo el sitio ):
Ve a «Estilos del sitio» > «Colores», edita tu paleta de colores y guarda los cambios.
✅ Cambiar colores (por sección):
Haz clic en «Editar sección» > «Colores» para alternar entre los temas «Claro», «Oscuro» y «Brillante».
Consejos finales
Previsualiza los cambios en el ordenador y en el móvil antes de guardarlos.
Utiliza paquetes de fuentes y colores predefinidos para aplicar estilos rápidamente.
Personaliza cada sección si quieres que cada zona tenga un aspecto único.
