Personaliza el estilo de texto, el tamaño, el color y el espaciado de tu sitio web.
En esta guía se explica cómo cambiar las fuentes del sitio, incluidos el estilo, el tamaño, el color y el espaciado. Todos los sitios comienzan con estilos de fuente predeterminados que puedes cambiar y ajustar en Estilos del sitio.
Mira el video
Cómo funcionan las fuentes en Squarespace
Al revisar el menú de fuentes, ten en cuenta:
- Nuestra colección de fuentes incluye 600 fuentes de Google y 1 000 fuentes de Adobe. Esta colección no incluye todas las fuentes disponibles de Google o Adobe. Desplázate para explorar nuestra biblioteca completa o usa el campo de búsqueda del menú para buscar una fuente específica.
- Para mantener los menús cortos, limitamos lo que aparece al principio, centrándonos en las fuentes usadas recientemente y en nuestras opciones más populares. No todas las opciones de formato ofrecidas por Google Fonts o Adobe Fonts son compatibles con Squarespace.
Al elegir las fuentes, ten en cuenta:
- El uso de fuentes coherentes crea un aspecto unificado para tu sitio, por lo que estas opciones se limitan intencionalmente. Para editar fuentes además de los retoques disponibles, puedes agregar una fuente personalizada con CSS. En la versión 7.0, puedes agregar Adobe Fonts personalizadas.
- Algunas fuentes pueden representarse de forma diferente en los distintos dispositivos, como Windows vs. Mac o iOS vs. Android. Los distintos navegadores también pueden representar fuentes de manera diferente en algunos casos, como en los menús desplegables.
- Ocasionalmente, Google y Adobe eliminan fuentes de sus bibliotecas. El texto del sitio que use esa fuente no cambiará pero, si cambias a otra fuente, no puedes volver a cambiar. En su lugar, reemplazamos la fuente en nuestra biblioteca con la coincidencia más cercana para que puedas usar una similar.
Cuando uses fuentes en tu sitio, ten en cuenta:
- La mayoría de los cambios en una categoría de fuente (como encabezados y párrafos) se aplican en todo el sitio. Por ejemplo, al cambiar la fuente del texto del encabezado 1, se aplicará a todo el texto establecido como encabezado 1 en el sitio.
- Para crear encabezados en el cuerpo de texto, utiliza el menú desplegable de Formato en el editor de bloques de texto. Después de crear los encabezados, puedes cambiar su estilo. Para más información, consulta Ajustar el formato del texto.
- Cambiar el formato de texto en la barra de herramientas de texto anula los estilos establecidos para esa área de texto en los estilos del sitio. Por ejemplo, después de cambiar el texto del extracto de una entrada de blog a Encabezado 1, si editas la fuente o el tamaño de los extractos del blog en los estilos del sitio, el texto que cambiaste seguirá siendo el mismo.
Consejo: Para obtener ayuda para elegir las mejores fuentes para tu sitio, consulta Cómo elegir las fuentes y los colores correctos.
Cómo funciona el ajuste de escala de texto en Squarespace
El ajuste de escala de texto es cuando el tamaño del texto cambia para llenar un área determinada de tu sitio. Nuestro diseño adaptable garantiza que el texto se ajuste a cualquier tamaño de pantalla. El ajuste de escala del texto de tu sitio depende de la versión de tu sitio.
La escala del texto se ajusta según el tamaño base de la fuente. Puedes usar el ajuste de escala de texto para rellenar un bloque de texto independientemente de la configuración de la fuente.
La escala de ajuste del texto depende del tamaño del navegador. Algunas familias de plantillas incluyen una opción para ajustar la escala del texto.
Buscar un ajuste para una fuente
Los ajustes de fuentes funcionan de manera diferente según la versión del sitio.
Para cambiar todas las fuentes en todo el sitio:
- Mientras editas una página, abre estilos del sitio y, a continuación, haz clic en > al lado de Fuentes.
- Haz clic en Cambiar en el paquete de fuentes actual para ver todos los paquetes de fuentes disponibles. Haz clic en Sans-serif, Serif o Mixto para ver distintos paquetes de fuentes para cada estilo.
- Haz clic en un nuevo paquete de fuentes para previsualizarlo en tu sitio.
- Haz clic en Atrás para volver al panel Fuentes y establecer el tamaño base de la fuente. Todo el texto restante se ajusta de forma relativa a este tamaño.
- Tus cambios se mantienen mientras editas el contenido de otra página. Para guardar tus cambios, haz clic en Guardar. Para dejar de editar, haz clic en Salir.
Si no quieres que Google Fonts o Adobe Fonts (antes Typekit) se carguen en tu sitio, selecciona uno de nuestros paquetes de fuentes integrados:
- En Sans-serif, selecciona Helvetica Neue.
- En Serif, selecciona Georgia.
- En Mixto, selecciona Verdana.
Para cambiar un retoque de fuente específico:
- En el panel de Fuentes, haz clic en Asignar estilos.
- Busca el título de ese grupo de fuentes, como Título o Botón y haz clic en el título para abrir todas las opciones de ajustes para ese grupo. También puedes hacer clic en cualquier texto de la vista previa de la página para mostrar sus opciones de ajustes.
- Haz clic en el menú desplegable junto al nombre del ajuste para elegir un nuevo estilo de fuente. Para personalizarlo aún más, haz clic en Personalizar y, a continuación, utiliza las otras opciones que aparecen.
- Haz clic en Mostrar todo o Atrás para volver a la lista completa.
Para cambiar el ajuste de una fuente, abre Estilos del sitio. Dependiendo de la plantilla que estés utilizando, verás diferentes opciones y nombres para estos grupos de fuentes. Los ajustes de fuente se pueden identificar por el título del grupo que afectan y la pequeña flecha que abre las opciones adicionales.
Si no quieres que Google Fonts o Adobe Fonts (antes, Typekit) se carguen en tu sitio, haz clic en Configurar todas como fuentes del sistema en la parte inferior del panel de estilos del sitio.
Si no ves el grupo de texto que quieres cambiar, puedes obtener más información sobre las opciones de estilo de tu plantilla en la guía de tu plantilla. También puedes hacer clic en el texto de una página para mostrar sus ajustes en estilos del sitio. Haz clic en Mostrar todo para volver a la lista completa.
Encontrar una fuente específica
La búsqueda de fuentes funciona de manera diferente dependiendo de la versión de Squarespace en la que se encuentre tu sitio.
Para utilizar una fuente específica de Adobe o Google, búscala en la opción Examinar todas las fuentes.
- Abre el panel Estilos del sitio y haz clic en > junto a Fuentes.
- Pulsa el tipo de texto que quieres cambiar: Encabezados, Párrafos, Botones o Varios.
- Presiona Familia.
- Haz clic en Explorar todas las fuentes.
- Desplázate para ver las fuentes disponibles o ingresa el nombre de la fuente en el campo Buscar fuentes, en la parte superior del panel.
- Tus cambios se mantienen mientras editas el contenido de otra página. Para guardar tus cambios, haz clic en Guardar. Para dejar de editar, haz clic en Salir.
Consejo: La categoría Varios se aplica a la mayoría de los textos que no son encabezado o texto de párrafo normal, como los precios de los productos, la navegación por bloques de menús y otros metadatos de contenido.
Para usar una fuente específica de Adobe o Google, utiliza el campo de búsqueda dentro de un retoque de fuente para encontrarla.
- Abre el panel de Diseño y luego haz clic en estilos del sitio.
- Haz clic en el ajuste de fuente que quieres cambiar y, a continuación, en el menú desplegable junto al nombre de la fuente.
- Desplázate para ver las fuentes disponibles o ingresa el nombre de la fuente en el campo Buscar fuentes en la parte superior del panel.
- Haz clic en la fuente que deseas utilizar y, a continuación, en Guardar en la parte superior del panel para aplicar los cambios.
Si no tienes una fuente en mente, Adobe y Google tienen recursos para buscar y obtener una vista previa de fuentes en sus plataformas:
Cuando encuentres una fuente que te guste, búscala en Squarespace. Ten en cuenta que algunas fuentes podrían no estar disponibles.
Aplicar estilo a una fuente
El estilo de fuente funciona de manera diferente dependiendo de la versión de Squarespace en la que esté tu sitio.
Para aplicar estilo a las fuentes:
- Abre el panel Estilos del sitio y haz clic en > junto a Fuentes.
- Pulsa el tipo de texto que quieres cambiar: Encabezados, Párrafos, Botones o Varios.
- Familia mostrará la lista de fuentes. Utiliza el estilo y varias opciones de tamaño para cambiar el estilo.
- Tus cambios se mantienen mientras editas el contenido de otra página. Para guardar tus cambios, haz clic en Guardar. Para dejar de editar, haz clic en Salir.
Ajusta los estilos como se indican en la tabla siguiente.
Consejo: Para cambiar el color del texto, cambia los colores de todo el sitio o de la sección. En un bloque de texto, también puedes usar la barra de herramientas de texto.
|
Nombre del estilo |
Opciones |
|
Peso |
Hace el texto más grueso o más delgado. |
|
Altura de la línea |
Cambia el espacio entre líneas de texto. |
|
Espacio entre las letras |
Cambia el espacio entre las letras. |
|
Estilo |
Establece el texto en formato normal, negrita, cursiva u otros formatos, dependiendo de la fuente. |
|
Transformación de texto |
Pone en mayúsculas algunos textos, todos o ninguno. Este retoque solo se aplica a ciertas fuentes. |
|
Tamaño |
Haz que el texto sea más grande o más pequeño. Cada tipo de texto incluye una o más opciones de tamaño. Por ejemplo, los encabezados incluyen controles deslizantes para los formatos Encabezado 1, Encabezado 2, Encabezado 3 y Encabezado 4 en la sección Tamaño. También puedes cambiar el tamaño del texto en bloques de texto individuales mediante la barra de herramientas de texto. |
Haz clic en un ajuste de fuente o de tipografía para abrir las opciones adicionales, que incluyen el nombre de la fuente, el tamaño y el espaciado entre caracteres.
Según el texto y la plantilla específicos, puedes ajustar las opciones de tipografía que aparecen en el cuadro que sigue. Hay opciones de estilo y ajustes adicionales disponibles para diferentes fuentes y plantillas.
Consejo: Para cambiar el color del texto, utiliza el retoque de color para ese tipo de texto en Estilos del sitio. Obtén más información en Cómo cambiar colores.
|
Nombre del ajuste |
Opciones |
|
Fuente |
Selecciona o busca una fuente de Google o Adobe. Verás selecciones verificadas en la parte superior del menú. Desplázate hacia abajo para navegar por nuestra biblioteca completa, o utiliza el campo de búsqueda en la parte superior del menú si conoces el nombre de una fuente que deseas utilizar. |
|
Tamaño de la fuente |
Utiliza el control desplazable o introduce manualmente un tamaño de fuente. |
|
Altura de la línea |
Configura el espacio entre líneas. Una altura de la línea de 0 em puede causar una superposición de texto, especialmente en dispositivos móviles. |
|
Espacio entre las letras |
Configura el espacio entre caracteres. Los valores negativos pueden causar superposición de caracteres. |
|
Transformación de texto |
Selecciona Nada, Mayúsculas, Mayúscula inical o Minúsculas. |
|
Decoración del texto |
Selecciona Nada, Subrayado, Línea alta o Tachado. |
|
Alineación del texto |
Selecciona Izquierda, Centrado o Derecha. |
Agregar una fuente de Adobe personalizada (solo versión 7.0)
Si tienes una fuente personalizada, puedes agregarla a tu sitio de Squarespace versión 7.0 utilizando nuestra integración con Adobe Fonts. Las fuentes de Adobe personalizadas no son compatibles con la versión 7.1.
- Este proceso reemplaza las opciones de Adobe Fonts en los menús Estilos del sitio por las fuentes del proyecto personalizado. Adobe Fonts de Squarespace no estará disponible para su uso mientras el proyecto Adobe Fonts personalizado esté habilitado.
- Las fuentes personalizadas están disponibles con una suscripción a Adobe Creative Cloud. Antes de suscribirte, elige un plan que incluya Adobe Fonts.
Paso 1: Crea un proyecto web y agrega las fuentes
Para agregar tus fuentes personalizadas a Squarespace, primero tendrás que crear un proyecto web en Adobe. Inicia sesión en tu cuenta de Adobe Fonts y, a continuación, sigue sus pasos para crear un proyecto web.
Después de crear tu proyecto web, verás tu código HTML para insertar personalizado. No lo necesitarás, así que no lo agregues a tu sitio. En vez de esto, utiliza el siguiente paso para obtener el ID del proyecto web, que es más corto.
Paso 2: Agrega tus fuentes personalizadas a Squarespace
Una vez que tu proyecto web incluya todas las fuentes que necesitas, agrega el proyecto a tu sitio de Squarespace usando el ID del proyecto.
- En tu cuenta de Adobe Fonts, haz clic en Mis fuentes de Adobe Fonts, en la esquina superior derecha.
- Haz clic en Proyectos web y, a continuación, busca el proyecto que deseas agregar a Squarespace.
- Copia la ID del proyecto, que es una cadena de letras y números sobre el código para insertar. Asegúrate de copiar la ID del proyecto único y no la que se muestra en el ejemplo.
- Abre el panel de Herramientas de desarrollo.
- Haz clic en Claves de API externas.
- Desplázate hacia abajo hasta la casilla ID del Proyecto de Adobe Fonts.
- Pega el ID de proyecto que copiaste de Adobe en la casilla.
- Haz clic en Guardar.
Paso 3: Usa tus fuentes de Adobe Fonts
Después de agregar las fuentes de Adobe Fonts, podrás aplicarlas al texto en tu sitio. Las fuentes de tu proyecto web reemplazan las fuentes integradas de Adobe Fonts en Estilos del sitio. Para encontrar rápidamente una fuente personalizada de Adobe Fonts, búscala por su nombre en la casilla Buscar .
Cómo administrar los cambios en tus fuentes
- Si cambias tus fuentes de Adobe Fonts, vuelve a publicar para que aparezcan estos cambios en Squarespace. En caso de que desees informarte mejor, visita la documentación de Adobe.
- Aunque Adobe Fonts elimine una fuente que estás usando de su colección, la fuente seguirá cargándose en tu sitio. No obstante, no podrás aplicarla a texto nuevo o volver a usarla si la cambias, porque ya no aparecerá en Estilos del sitio.
Veo un mensaje de "Fuentes no admitidas" en mis Estilos del sitio.
Verás este mensaje si tu sitio usa una fuente que Adobe Fonts ha quitado. Cuando la fuente ya no sea compatible, la reemplazaremos en Squarespace con la opción disponible más parecida. Revisa las secciones de estilo que se enumeran en el error para aprobar o cambiar la fuente de reemplazo.
Adobe Fonts también eliminará las fuentes que quites de tu página de Adobe Fonts.
Mis fuentes personalizadas de Adobe no se muestran en mi sitio
Si algunos caracteres especiales no se muestran correctamente, edita el proyecto web y selecciona Todos los caracteres antes de agregar la ID del proyecto a Squarespace.
Si no aparece ninguna de tus fuentes, revisa si tu sitio contiene JavaScript. Si alguna vez usaste el método JavaScript de Adobe Fonts para agregar fuentes a tu sitio, tus fuentes podrían no cargarse adecuadamente. Quita el JavaScript y sigue los pasos anteriores para agregar tus fuentes de Adobe Fonts.
Dónde obtener atención al cliente
Si tienes dificultades para agregar tu ID de proyecto de Adobe Fonts o si no aparecen las fuentes de Adobe Fonts en tu sitio, contáctanos y te ayudaremos a resolver tus problemas. Para todas las demás preguntas sobre cómo usar las fuentes de Adobe Fonts, comunícate con ellos o lee su documentación.
Solución de problemas de fuente
Antes de seguir estos pasos, comprueba si el problema se relaciona con tu navegador. Si la solución de problemas del navegador no funciona, lee esta sección con otras situaciones habituales que puedes encontrar cuando cambias de fuente.
Copié y pegué texto, pero no coincide con mi formato
Al copiar y pegar texto, es posible que copies un formato que interfiere con el CSS de Squarespace. Esto provoca que el texto aparezca diferente de los ajustes que hayas habilitado en Estilos del sitio.
Para evitarlo, te recomendamos copiar y pegar el texto en un programa de procesamiento de texto que elimine el formato especial o usar un atajo del teclado para eliminar el formato.
- En Windows, presiona Ctrl + Shift + V cuando pegues el texto para eliminar el formato.
- En una Mac, presiona ⌘ + Shift + V cuando pegues texto para eliminar el formato.
- También puedes pegar texto sin formato haciendo clic en el ícono del portapapeles. Si ya ingresaste texto, elimina el formato resaltando el texto y haciendo clic en el ícono de quitar formato .
Mi fuente luce diferente cuando inicio sesión
La forma en que las fuentes se procesan en tu sitio activo puede verse afectada por tu dominio.
Si conectaste un dominio de terceros con tu sitio, comunícate con tu proveedor de dominio para asegurarte de que no hayas configurado un redireccionamiento enmascarado. El enmascaramiento controla la forma en que tu dominio dirige a tu sitio y podría interferir con la configuración de estilo de Squarespace.
No puedo configurar mi fuente en un tamaño específico
Si no puedes establecer tu fuente en un tamaño en px (píxel) específico, tu sitio puede estar usando un valor em o rem.
- Todos los sitios de la versión 7.1 usan valores rem para los tamaños de fuente. Esto significa que su tamaño es relativo al tamaño de fuente base. Para cambiar el valor rem de una fuente, utiliza el control deslizante o haz clic en el valor actual e introduce manualmente un nuevo valor. Para cambiar el tamaño de fuente base, ajusta el tamaño base en el paquete de fuentes.
- Para los sitios de la versión 7.0, algunas plantillas usan em en lugar de px para la fuente y el tamaño de espaciado. Si introduces un valor directamente en el campo numérico, puedes mantener el tamaño escalable con el valor em o ingresar px para mantenerlo fijo. Sin embargo, si tu plantilla solo usa un valor px , no introduzcas un valor em en su lugar, ya que esto puede evitar que la fuente cambie de tamaño correctamente en pantallas más pequeñas.
Mi fuente no se lee bien en los dispositivos móviles
Los pesos de fuentes menores de 100 pueden aparecer muy claros u opacos en los dispositivos móviles más pequeños. Para que tu texto sea visible en todos los dispositivos, abre Estilos del sitio y asegúrate de que el peso de la fuente sea superior a 100.