Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Usar Typekit con Squarespace

Typekit es un servicio ofrecido por Adobe que brinda una biblioteca de fuentes de alta calidad. Con nuestra integración, puedes elegir entre más de 1000 tipos integrados de fuentes Typekit para el sitio. También puedes utilizar TypeKit para añadir un kit de fuentes personalizadas al sitio.

Seleccionar una de nuestras fuentes Typekit

En el Home Menu (Menú principal), haz clic en Design (Diseño) y luego haz clic en Style Editor (Editor de Estilo). Sigue los pasos de Cambiar fuentes para encontrar los ajustes de Font (Fuente) o Typography (Tipografía) .

Los menús de fuentes en el Editor de Estilo incluyen una selección examinada de opciones populares de fuentes de Typekit y Google, lo que te ahorra tener que buscar entre todas las opciones.

Si la fuente que deseas no aparece en la lista, desplázate hasta la parte inferior del menú y haz clic en Show All Fonts (Mostrar Todas las Fuentes) o busca la fuente por el nombre en la casilla Search (Buscar).

Consejo: Si no tienes una fuente en mente, TypeKit tiene un excelente recurso para buscar y previsualizar las fuentes aquí. Una vez que encuentres una fuente TypeKit que te guste, búscala en Squarespace.

Añadir fuentes TypeKit personalizadas

Si tienes una fuente personalizada de TypeKit, sigue estos pasos para utilizarla en tu sitio Squarespace. Ten en cuenta que seguir estos pasos sustituirá las opciones de TypeKit en los menús del Editor de Estilo con las fuentes en el kit personalizado. Las fuentes del TypeKit de Squarespace aún aparecerán como opciones, pero no estarán disponibles para usarlas mientras tengas habilitado el Typekit personalizado.

Teniendo en cuenta el número de fuentes incorporadas disponibles, es posible que sólo tengas que utilizar esta opción si tienes tu propia fuente de TypeKit.

Nota: Hay fuentes personalizadas disponibles para los Planes Portfolio y Performance de TypeKit.

Paso 1 - Crea un Kit

En la cuenta de TypeKit, posiciona el cursor sobre Kits y haz clic en + Add New Kit (+ Agregar nuevo Kit).

En la ventana Create a Kit (Crear un Kit) , ingresa un nombre para el kit en la casilla Name (Nombre) .

En la casilla Domains (Dominios) , agrega cada dominio registrado o asignado al sitio Squarespace, incluyendo todas las versiones con y sin "www." así como también el dominio .squarespace.com integrado. Esto asegura que las fuentes siempre se mostrarán sin importar qué URL se utiliza para visitar el sitio.

Haz clic en Continue (Continuar).

En la ventana Install JavaScript (Instalar JavaScript) , haz clic en Continue (Continuar).

Nota: Verás ventanas con código JavaScript aquí, pero no agregues este JavaScript al sitio Squarespace. Continúa el proceso hasta que hayas generado el ID del Kit de TypeKit, que es un conjunto más corto de letras y números.

Haz clic en Embed Code (Integrar Código).

Copia el ID del Kit de TypeKit que aparece debajo del código JavaScript integrado predeterminado.

Paso 2 - Agrega el ID del Kit

En el Home Menu (Menú principal) , haz clic en Design (Diseño) y luego haz clic en Advanced (Avanzado).

Pega el ID del Kit en la casilla TypeKit Kit ID (ID del Kit de Typekit) . Luego haz clic en Save (Guardar) .

Paso 3 - Añade fuentes al Kit

Vuelve a la cuenta TypeKit y busca fuentes en la biblioteca de TypeKit. Selecciona una fuente y, a continuación, haz clic en + Use Fonts (+ Usar fuentes) para añadirla al kit. Cada fuente seleccionada aparecerá en el menú de fuentes en el Editor de Estilos.

 

Paso 4 - Añade selectores CSS

Después de añadir fuentes a tu kit, tendrás que especificar qué elementos de tu sitio deberían usarlas. Puedes hacerlo añadiendo selectores CSS. 

En el Editor TypeKit que se abre, añade los selectores CSS para agregar cada fuente que has añadido al kit. Haz clic en Publish (Publicar) para aplicar las fuentes de Typekit al sitio. 

Nota: Ubicar los selectores de CSS en un Typekit requiere tener conocimientos de codificación y usar herramientas del desarrollador. Esto escapa al alcance de la asistencia de Squarespace.  Para obtener más información, visita nuestras Preguntas frecuentes sobre el código personalizado.

Paso 5: Usa tu fuente TypeKit

Después de añadir fuentes Typekit, las puedes aplicar al texto en el sitio. Las fuentes en el kit sustituyen a las fuentes integradas de TypeKit en el Editor de Estilo.

Para encontrar rápidamente la fuente personalizada de TypeKit, búscala por su nombre en la casilla Search (Buscar) .

Si TypeKit elimina una fuente que aparece en tu sitio, la fuente continuará cargada en tu sitio. Sin embargo, la fuente no aparecerá en la lista de fuentes de Typekit en el Editor de Estilo.

Consejo: Si cambias de TypeKit, publica nuevamente para ver estos cambios en Squarespace. Para obtener más información, consulta la documentación de TypeKit

Resolución de problemas

Si las fuentes personalizadas de Typekit no se muestran en el sitio:

  1. Comprueba cualquier JavaScript que hayas añadido al sitio. Si alguna vez utilizaste el método JavaScript de TypeKit para agregar fuentes al sitio web, es posible que las fuentes no se carguen correctamente. Quita el JavaScript y sigue los pasos anteriores para añadir las fuentes TypeKit.
  2. Comprueba la dirección URL en la parte superior del navegador para ver si estás utilizando un dominio .squarespace.com . Algunos kits de Typekit no se mostrarán cuando se visita el sitio usando un dominio .squarespace.com como "http://nombredetusitio.squarespace.com." Siempre dirige a los visitantes al dominio personalizado o a tu dominio .squarespace.com.

Nota: Squarespare puede ayudarte a configurar esta integración con TypeKit. Si tienes problemas para agregar el ID del Kit de TypeKit o si las fuentes de Typekit no aparecen, inicia un reclamo y te ayudaremos a solucionar los problemas. Para todas las demás preguntas sobre el uso de TypeKit, ponte en contacto con ellos en support@typekit.com o consulta su documentación.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 16 de 52
Usar Typekit con Squarespace