Cómo agregar fuentes personalizadas a Squarespace como un profesional

¿Quieres agregar fuentes personalizadas a Squarespace?

Si eres usuario de Squarespace, ya sabes que la plataforma viene con algunas opciones de fuentes sólidas. ¡Pero hay muchas razones para agregar fuentes a los sitios web de Squarespace!

Por lo general, es una fuente de marca, o incluso una hecha a medida.

Tal vez se trata más de un aspecto particular que desea crear para los elementos dentro de su sitio web.

Sea cual sea el motivo, es fácil agregar fuentes personalizadas a Squarespace: ¡solo sigue este proceso!

Cómo agregar una fuente personalizada a tu sitio web de Squarespace

Agregar una fuente que elijas a tu sitio web de Squarespace es bastante simple, pero hay que agregar un poco de CSS.

Asegúrate de estar de acuerdo con hacer eso antes de comenzar, o busca a alguien que lo esté.

Paso 1. Elige tu fuente

Si ya ha elegido la fuente que desea usar, vaya al siguiente paso. De lo contrario, asegúrese de elegir una fuente que pueda usar legalmente en su blog.

Hay muchos lugares para encontrar fuentes gratuitas y de pago, como Creative Market. Pero verifique la licencia antes de agregar una a su sitio web.

Paso 2. Prepare sus archivos de fuentes web

Para agregar una fuente al sitio web, necesitará tres formatos de archivo de fuente:

1. .ttf o .otf
2. .guau
3. .woff2

A veces, es posible que tenga un tipo de archivo de fuente web y, si lo tiene, omita este paso. Puedes usar solo eso.

De lo contrario, tenga los tres tipos de archivos listos para agregar.

Paso 3. Sube tus archivos de fuentes a Squarespace

Vaya a Diseño > CSS personalizado > Administrar archivos personalizados

Aquí agregará fuentes a través del botón de carga.

Repita esto para los tres archivos, o para el archivo de fuente web si eso es lo que tiene.

Paso 4. Asigne un nombre a su fuente personalizada en Squarespace

Una vez que se carga la fuente, debe decirle a Squarespace dónde y qué es con el Editor de CSS.

Usa el siguiente código:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Tome esto y agregue la información relevante para su fuente:

• Nombre de la fuente: reemplácelo con el nombre de su fuente según el nombre del archivo o algo que recordará.
• URL de fuentes: reemplace esto con las URL de las fuentes que acaba de cargar. Tome la URL de su área de carga (de la misma manera que lo haría con una URL de imagen) y agréguela en su lugar.

Paso 5. Defina dónde y cómo se debe usar la fuente personalizada

Finalmente, solo necesita decirle a Squarespace dónde usar las diferentes fuentes en su sitio web.

Esto puede ser en lugares como los encabezados o el encabezado del sitio, los botones o incluso algo como el bloque del boletín.

Cómo usar tu fuente en lugares comunes

Una vez que haya cargado su fuente, puede comenzar a brindarle a Squarespace información específica sobre dónde usarla.

Aquí hay algunos ejemplos populares y cómo hacerlo.

Cómo cambiar las fuentes del encabezado del sitio

El encabezado del sitio es el área en la parte superior de la barra de navegación.

Es posible que tenga muchos enlaces aquí, un logotipo de texto y tal vez un anuncio.

La fuente de todos estos se puede cambiar usando el siguiente fragmento de CSS:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

Recuerda reemplazar TU NOMBRE con el nombre de tu fuente.

Cómo cambiar las fuentes de los botones

Otro lugar popular para usar fuentes personalizadas es en los botones de su sitio web.

Hay tres bloques de botones: Pequeño, Mediano y Grande. Puede cambiar uno o todos ellos con el siguiente código:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

Recuerda reemplazar TU NOMBRE con el nombre de tu fuente.

¡Pin a Pinterest para que puedas volver más tarde!

(Más consejos sobre fuentes personalizadas y resolución de problemas después del gráfico).

Cómo cambiar las fuentes del bloque del boletín

El bloque Boletín permite que las personas se registren en su lista de correo electrónico. Mucha gente usa diferentes complementos para esto.

Pero si usa el bloque dentro de Squarespace, el siguiente código le permitirá agregar una fuente personalizada.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

Recuerda reemplazar TU NOMBRE con el nombre de tu fuente.

Cómo cambiar las fuentes de las publicaciones del blog

Una de las cosas más populares que se pueden hacer con una fuente es usarla para publicaciones de blog.

Debe tener en cuenta el título de la página, las descripciones y los títulos de las publicaciones en las páginas de los artículos al hacer esto.

Probablemente querrás que todos sean iguales.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

Recuerda reemplazar TU NOMBRE con el nombre de tu fuente.

Cómo cambiar las fuentes del bloque de comillas

El último ejemplo es cambiar el bloque de citas a una fuente diferente.

Esto se usa para citas en publicaciones, pero también para cosas como testimonios o reseñas de clientes.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

Recuerda reemplazar TU NOMBRE con el nombre de tu fuente.

También te puede interesar mi guía de tamaño de imagen de Squarespace.

Problemas de fuentes personalizadas

Agregar fuentes es un trabajo fácil una vez que dominas un poco de CSS. Pero hay algunos errores comunes que se informan.

Mensaje "Fuentes no admitidas" en los estilos del sitio

De vez en cuando, es posible que vea un mensaje de "fuente no admitida" en su sitio. Esto sucede cuando se usa una fuente de Adobe y luego Adobe la retira.

La mayoría de las veces, Squarespace lo sustituirá por la alternativa más cercana. Pero si no, es posible que deba cargar otra fuente para reemplazarla.

Mi fuente se ve diferente cuando estoy conectado

A veces, las personas notan que sus fuentes se ven diferentes cuando inician sesión y cuando ven el sitio en vivo. Por lo general, esto se debe a los lectores de fuentes y cómo ven el sitio.

Si nota esto, comuníquese con el soporte de Squarespace y ellos pueden ver la configuración para ver qué se debe ajustar.

No puedo configurar mi fuente a un tamaño específico

Los problemas para establecer un tamaño específico para una fuente generalmente tienen que ver con el backend de su sitio web. Puede deberse a la versión de Squarespace que estás usando.

Por lo tanto, comuníquese con el soporte para obtener su ayuda con lo que podría estar mal.

Agrega tus fuentes personalizadas a Squarespace

Con un toque de CSS, puedes agregar rápidamente archivos de fuentes personalizadas a Squarespace.

Puede usarlos en diferentes lugares con un poco de código y ajustar todo, desde el tamaño hasta el espaciado entre letras.

El Editor de estilos facilitó la personalización de su sitio web más allá de las opciones de fuentes integradas.

Entonces, ¿cómo podría usar fuentes personalizadas para que su sitio web se vea aún más inteligente?