Cómo añadir fuentes personalizadas a Squarespace
En el mundo del diseño web, la tipografía desempeña un papel fundamental a la hora de crear una experiencia de usuario visualmente atractiva y coherente. Aunque Squarespace ofrece una amplia gama de opciones de fuentes, puede llegar un momento en el que necesites añadir una fuente personalizada a tu página web. Ya sea para adaptarla a tu imagen de marca o para conseguir un efecto estético concreto, la posibilidad de subir y utilizar fuentes personalizadas en Squarespace puede mejorar considerablemente el aspecto y la sensación general de tu sitio web.
En esta entrada del blog, te guiaremos a lo largo del proceso para añadir fuentes personalizadas a Squarespace. Abordaremos tanto la versión 7.0 como la 7.1 de Squarespace, para que dispongas de los conocimientos necesarios para implementar fuentes personalizadas independientemente de la versión que utilices. Siguiendo nuestras instrucciones paso a paso, podrás subir tus propios archivos de fuentes, aplicarlos a encabezados y al cuerpo del texto específicos, e incluso personalizar aún más el estilo de tus fuentes personalizadas mediante código CSS.
Así que, si estás listo para llevar tu página web de Squarespace al siguiente nivel y crear una identidad visual única con fuentes personalizadas, vamos a ponernos manos a la obra y a aprender cómo añadir fuentes personalizadas a Squarespace.
Paso 1: Cargar la fuente personalizada
Antes de poder empezar a utilizar una fuente personalizada en Squarespace, debes subir el archivo de la fuente a tu página web. A continuación te ofrecemos una guía detallada sobre cómo hacerlo:
A. Buscar y preparar el archivo de fuente
1. Busca el archivo de fuente que quieras subir. Debe estar en formato .ttf, .otf o .woff.
2. Asegúrate de que dispones de los derechos y permisos necesarios para utilizar la fuente. Si no tienes una fuente personalizada, puedes encontrar fuentes gratuitas en páginas web como Font Squirrel o Google Fonts, o adquirir fuentes personalizadas en plataformas como Creative Market.
B. Cómo acceder al panel de control de Squarespace y a la sección «CSS personalizado»
1. Inicia sesión en tu cuenta de Squarespace y accede al panel de control de tu página web.
2. En el panel de control, haz clic en «Diseño» en el menú superior.
C. Subir el archivo de fuente a Squarespace
1. En el menú «Diseño», selecciona «CSS personalizado» en el menú desplegable.
2. Desplázate hasta la parte inferior de la página «CSS personalizado» y haz clic en «Gestionar archivos personalizados».
3. Aparecerá una ventana en la que podrás subir tu archivo de fuente. Haz clic en «Añadir imágenes o fuentes» y selecciona el archivo de fuente de tu ordenador.
4. Una vez subido el archivo de fuente, aparecerá en la lista de archivos personalizados.
Ahora que has subido correctamente el archivo de fuente a Squarespace, puedes pasar al siguiente paso, que consiste en añadir la fuente a tu código CSS.
Paso 2: Añadir la fuente al código CSS
Ahora que ya has subido el archivo de la fuente personalizada a Squarespace, es el momento de añadir la fuente a tu código CSS. Esto te permitirá especificar dónde debe utilizarse la fuente en tu página web. Sigue estos pasos detallados para añadir la fuente a tu código CSS:
A. Creación de una página de prueba de estilos
1. Se recomienda crear una página de prueba en tu sitio web de Squarespace donde puedas aplicar los estilos de fuente y ver los cambios en tiempo real. Esto te ayudará a visualizar cómo queda la fuente en los distintos encabezados y en el cuerpo del texto.
B. Acceder a la sección «CSS personalizado» y añadir el fragmento de código
1. En tu panel de control de Squarespace, ve a «Diseño» y selecciona «CSS personalizado» en el menú desplegable.
2. Desplázate hacia abajo hasta el cuadro «CSS personalizado». Si ya tienes código CSS, pega el siguiente fragmento de código al final. Si no es así, puedes pegarlo al principio.
@font-face {
font-family: 'FontTitle';
src: url('FontURL');
}
h1 {
font-family: 'FontTitle';
}
C. Edición del código CSS para especificar la familia de fuentes y la URL
1. Sustituye `'FontTitle'` por el nombre que quieras asignar a tu fuente personalizada. Asegúrate de mantener las comillas simples a ambos lados del nombre de la fuente.
2. Para encontrar la URL de la fuente que has subido, haz clic en «Gestionar archivos personalizados» en la parte inferior de la página «CSS personalizado». Haz clic en tu archivo de fuente y la URL se completará automáticamente en el cuadro «CSS personalizado». Sustituye `'FontURL'` por la URL de tu archivo de fuente.
D. Aplicación de la fuente a determinados encabezados y al cuerpo del texto
1. En el fragmento de código CSS, se utiliza el selector `h1` a modo de ejemplo. Puedes modificarlo para que se aplique a otros encabezados, como `h2`, `h3`, o incluso a párrafos utilizando el selector `p`.
2. Para aplicar la fuente a un título o párrafo concreto, sustituye `'FontTitle'` por el nombre que le hayas asignado a tu fuente personalizada en el paso anterior.
Una vez que hayas realizado los cambios necesarios en el código CSS, haz clic en «Guardar» para aplicar la fuente personalizada a tu página web de Squarespace. Ahora deberías ver los encabezados o párrafos especificados con tu fuente personalizada.
Paso 3: Seguir personalizando la tipografía
Una vez que hayas añadido la fuente personalizada a tu página web de Squarespace, es posible que quieras personalizar aún más su aspecto. Aunque el panel «Estilos del sitio» de Squarespace te permite ajustar algunas propiedades de la fuente, hay casos en los que se necesita código CSS adicional para conseguir el estilo deseado. Sigue estos pasos para aplicar estilos a tu fuente personalizada:
A. Análisis de las limitaciones del panel «Estilos del sitio» de Squarespace
1. El panel «Estilos del sitio» de Squarespace ofrece opciones para ajustar el tamaño y el grosor de la fuente, así como otras propiedades básicas de los encabezados y los párrafos.
2. Sin embargo, es posible que algunas fuentes personalizadas no admitan determinadas opciones de estilización a través del panel «Estilos del sitio».
B. Uso del código CSS para personalizar las propiedades de las fuentes
1. Identifica las propiedades específicas de la fuente que deseas personalizar, como el tamaño, el grosor, el espaciado entre letras, la transformación del texto, la altura de línea, etc.
2. Abre la sección «CSS personalizado» en tu panel de control de Squarespace y busca el fragmento de código CSS que añadiste en el paso 2.
C. Proporcionar un fragmento de código CSS para la personalización de las fuentes
1. A continuación te mostramos un fragmento de código CSS que puedes utilizar para aplicar estilos a tu fuente personalizada:
h1 {
font-family: 'FontTitle';
font-weight: 700;
font-style: italic;
font-size: 16px;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1em;
}
2. Modifica las propiedades CSS que se encuentran entre llaves (`{}`) para conseguir el estilo deseado para tu fuente personalizada.
3. Puedes ajustar propiedades como `font-weight`, `font-style`, `font-size`, `letter-spacing`, `text-transform` y `line-height` para adaptarlas a tus preferencias de diseño.
Al aplicar código CSS para dar estilo a tu fuente personalizada, podrás conseguir un aspecto más exclusivo y personalizado para tu página web de Squarespace. Recuerda guardar los cambios en la sección «CSS personalizado» para ver cómo queda la fuente personalizada con el nuevo estilo.
Cómo añadir fuentes personalizadas en Squarespace 7.1
Si utilizas Squarespace 7.1, el proceso para añadir y aplicar fuentes personalizadas es ligeramente diferente. A continuación te ofrecemos una guía paso a paso sobre cómo añadir fuentes personalizadas en Squarespace 7.1:
A. Carga del archivo de fuente
1. Accede a tu panel de control de Squarespace y ve a la sección «Diseño».
2. Haz clic en «CSS personalizado» para abrir el editor de CSS personalizado.
3. Desplázate hasta la parte inferior y haz clic en «Gestionar archivos personalizados».
4. Sube tu archivo de fuente haciendo clic en «Añadir imágenes o fuentes» y seleccionando el archivo de fuente de tu ordenador.
B. Añadir la fuente al código CSS
1. En el editor de CSS personalizado, añade el siguiente fragmento de código:
@font-face {
font-family: 'FontTitle';
src: url('FontURL');
}
2. Sustituye `'FontTitle'` por el nombre que quieras asignar a tu fuente personalizada.
3. Para encontrar la URL de la fuente que has subido, haz clic en «Gestionar archivos personalizados» y selecciona tu archivo de fuente. La URL se completará automáticamente en el editor de CSS personalizado. Sustituye `'FontURL'` por la URL de tu archivo de fuente.
C. Aplicación de la fuente personalizada a diferentes títulos y párrafos
1. Squarespace 7.1 ofrece más opciones para los encabezados y los párrafos. Estos son los selectores que puedes utilizar para aplicar la fuente personalizada:
- Título uno: `h1`
- Título 2: `h2`
- Título 3: `h3`
- Título 4: `h4`
- Primer párrafo: `.sqsrte-large`
- Segundo párrafo: `p`
- Tercer párrafo: `.sqsrte-small`
2. Para aplicar la fuente personalizada a un título o párrafo concreto, añade el siguiente fragmento de código CSS:
h1 {
font-family: 'FontTitle';
}
3. Sustituye `'FontTitle'` por el nombre que le hayas asignado a tu fuente personalizada.
D. Personalización adicional de los estilos de fuente
1. Para personalizar propiedades de la fuente como el tamaño, el grosor, el espaciado entre letras, etc., puedes utilizar código CSS similar al que se mencionó en el paso 3.
2. Modifica las propiedades CSS que se encuentran entre llaves (`{}`) para conseguir el estilo deseado para tu fuente personalizada.
Recuerda guardar los cambios en el editor de CSS personalizado para aplicar los estilos de fuente personalizados a tu página web de Squarespace 7.1.
Aplicar estilos a fuentes personalizadas en otras secciones de Squarespace
Además de aplicar fuentes personalizadas a los encabezados y párrafos, es posible que también quieras personalizar las fuentes en otras partes de tu página web de Squarespace. A continuación te ofrecemos algunos ejemplos de cómo puedes cambiar las fuentes en distintos elementos:
A. Personalización de las fuentes en el encabezado de la página web
1. Para cambiar la fuente del título de la página web, utiliza el siguiente código CSS:
.header-title-text a {
font-family: 'FontTitle';
}
2. Sustituye `'FontTitle'` por el nombre de tu fuente personalizada.
B. Cambiar las fuentes de los botones
1. Squarespace ofrece diferentes estilos de botones, como pequeño, mediano y grande. Utiliza el fragmento de código CSS adecuado para cambiar la fuente de cada estilo de botón:
/* Small or Tertiary Button */
.sqs-block-button-element--small, .sqs-button-element--tertiary {
font-family: 'FontTitle';
}
/* Medium or Primary Button */
.sqs-block-button-element--medium, .sqs-button-element--primary {
font-family: 'FontTitle';
}
/* Large or Secondary Button */
.sqs-block-button-element--large, .sqs-button-element--secondary {
font-family: 'FontTitle';
}
2. Sustituye `'FontTitle'` por el nombre de tu fuente personalizada.
C. Modificar las fuentes en el bloque del boletín informativo
1. Si tienes un bloque de boletín informativo en tu página web de Squarespace, puedes personalizar las fuentes que contiene utilizando el siguiente código CSS:
/* Newsletter Form Title */
.newsletter-form-header-title {
font-family: 'FontTitle';
}
/* Newsletter Form Description */
.newsletter-form-header-description p {
font-family: 'FontTitle';
}
/* Newsletter Form Fields */
.newsletter-form-field-element {
font-family: 'FontTitle';
}
/* Newsletter Form Button */
.newsletter-form-button {
font-family: 'FontTitle';
}
/* Newsletter Form Footnote */
.newsletter-form-footnote {
font-family: 'FontTitle';
}
2. Sustituye `'FontTitle'` por el nombre de tu fuente personalizada.
D. Ajustar las fuentes en las entradas del blog
1. Si tienes un blog en tu página web de Squarespace, puedes personalizar las fuentes de distintos elementos de las entradas del blog utilizando el siguiente código CSS:
/* Blog Page Post Title */
.blog-title {
font-family: 'FontTitle';
}
/* Blog Page Post Descriptions */
.blog-excerpt p {
font-family: 'FontTitle';
}
/* Blog Page Read More Link */
.blog-more-link {
font-family: 'FontTitle';
}
/* Blog Post Entry Titles */
.blog-item-title h1.entry-title {
font-family: 'FontTitle';
}
2. Sustituye `'FontTitle'` por el nombre de tu fuente personalizada.
E. Ajustar el estilo de las fuentes en el bloque de cita
1. Si utilizas el bloque de citas en tu página web de Squarespace, puedes personalizar las fuentes del texto de la cita y de la fuente utilizando el siguiente código CSS:
/* Quote Text */
.sqs-block-quote blockquote {
font-family: 'FontTitle';
}
/* Quote Source */
.sqs-block-quote .source {
font-family: 'FontTitle';
}
2. Sustituye `'FontTitle'` por el nombre de tu fuente personalizada.
Al aplicar código CSS a estos diferentes elementos, te asegurarás de que tus fuentes personalizadas se utilicen de forma coherente en toda tu página web de Squarespace, creando así un diseño cohesivo y visualmente atractivo. Recuerda guardar los cambios en el editor de CSS personalizado para ver los estilos de fuente actualizados en estas áreas.
