Al diseñar su Shopify tienda, utilizando fuentes personalizadas únicas que no se ofrecen en Biblioteca de fuentes de Shopify Puede permitirle distinguir su tienda del resto. Si bien aprender a agregar fuentes personalizadas a Shopify puede parecer abrumador, esta guía lo guiará paso a paso a través del proceso de obtención y adición de fuentes personalizadas a su tienda Shopify.
Paso 1: Obtenga sus fuentes personalizadas
El primer paso para agregar fuentes personalizadas a tu tienda Shopify es encontrar y comprar la fuente personalizada que desees. Puedes optar por descargar la fuente de un proveedor externo como Fuentes de Google o Equipment de tiposAsegúrese de descargarlo en tipos de fuente específicos, como Desactivado o WOFF2.
A continuación, navega desde tu panel de management de Shopify a ‘Tienda en línea‘ > ‘Temas‘ > ‘Comportamiento‘ botón > ‘Editar código.’
Paso 2: Cargue sus archivos de fuentes personalizadas
Ahora deberías estar frente a tu Editor de código de tema de Shopify.
En el menú de la izquierda, desplácese hacia abajo hasta ‘Activos‘ carpeta. Haga clic para abrirla y haga clic en ‘Agregar un nuevo activo.’
Aparecerá un pequeño cuadro de diálogo. Haga clic en el botónAgregar archivo‘ y seleccione los archivos de fuente personalizados que desee. Dado que solo puede agregar un nuevo recurso a la vez, deberá hacer esto varias veces si está cargando varios archivos. Una vez que haya terminado, haga clic en ‘Hecho‘ para cargar sus archivos de fuentes personalizados.
A continuación, regrese al editor de código del tema de Shopify y navegue hasta ‘Contenido‘ > ‘Archivos.’
Seleccionar ‘Subir archivos‘ y cargue aquí los mismos archivos de fuentes personalizados que cargó en su carpeta Activos.
Luego, copia y guarda los enlaces de cada uno de los archivos de fuentes que hayas cargado para usarlos nuevamente más tarde. Haz clic en el botón de enlace correspondiente de cada archivo para guardar el enlace.
Paso 3: Ingrese y actualice su código de fuente específico
Al regresar al editor de código del tema de Shopify, navegue hasta su ‘Disposición‘ carpeta y abrir ‘tema.liquido.’
Entre los dos grupos de códigos que comienzan con ‘cuerpo‘ y ‘@pantalla multimedia‘ dentro de ‘‘ etiqueta, crea el espacio adecuado y pega este código específico:
@cara-de-fuente {
familia de fuentes: ‘FUENTE’;
src: url((Insertar URL del recurso de fuente aquí)) format(‘woff’),
url((Insertar URL del recurso de fuente aquí)) format(‘woff2’);
}
Este código es una especie de plantilla que necesitarás editar para que coincida con el tipo de archivo de fuente que cargaste.
Según el tipo de archivo que hayas cargado, es possible que tengas que eliminar ciertas líneas de código del código que pegaste. Por ejemplo, si no estás cargando un archivo WOFF2, elimina la línea WOFF2 por completo.
Dentro del código pegado, reemplaza la palabra “FONT” en mayúsculas con el nombre exacto de tu fuente personalizada tal como aparece en tu carpeta Belongings. Reemplaza también cualquier instancia de ‘(inserte la URL del recurso de fuente aquí)‘ con sus respectivos enlaces que copiaste en Paso 2Asegúrese de que cada enlace coincida correctamente con su tipo de archivo correspondiente.
Cuando haya terminado, haga clic en ‘Ahorrar‘ para guardar los cambios.
Paso 4: Aplica tu fuente personalizada
Ahora es el momento de introducir el código que aplicará la fuente personalizada a los textos que desee. A continuación, encontrará instrucciones específicas sobre cómo aplicar la fuente personalizada a los encabezados y al cuerpo del texto de su tienda en línea.
Encabezados
Para aplicar su fuente personalizada a sus encabezados, navegue a ‘Activos‘ > ‘base.css‘ (puede ser ‘tema.liquid.scss‘ para ti). Haz clic en cualquier parte del código, presiona Ctrl+f y busca ‘h1Deberías encontrarte con una fila de código como esta:
Estos fragmentos de código son responsables de la apariencia de los encabezados de su tienda. Para que utilicen su fuente personalizada, reemplace el segmento de código “var(–font-heading-style);” después de “font-family:” con este código específico:
‘FUENTE’ !importante;
Nuevamente, asegúrese de reemplazar la palabra “FONT” con el nombre exacto de su fuente personalizada.
Texto del cuerpo
Si desea aplicar su fuente personalizada al cuerpo del texto, vuelva a ‘Disposición‘ > ‘tema.liquido‘ y encuentra el ‘cuerpo‘fragmento de código en el que pegaste código debajo Paso 3.
Reemplace el segmento de código “var(–font-body-family);” después de “font-family:” con este código específico:
‘FUENTE’ !importante;
Reemplace la palabra “FONT” con el nombre exacto de su fuente personalizada.
Paso 5: Guarda los cambios
Una vez que haya terminado de agregar y editar su código, asegúrese de hacer clic en ‘Ahorrar‘ para guardar los cambios.
Si desea cargar varias fuentes personalizadas, deberá repetir los pasos 1 a 3 para cada una.
Personalice y optimice su tienda Shopify con Oyova
Ya aprendiste a agregar fuentes personalizadas a Shopify, lo que le otorga una personalidad estilística única que cautivará a tus clientes y hará que vuelvan por más. Si deseas mejorar aún más tu tienda de comercio electrónico, considera asociarte con Oyova.
Deje que el equipo de expertos en advertising and marketing digital de Oyova haga el trabajo pesado con nuestro equipo especializado. Servicios de desarrollo de Shopify y servicios de desarrollo netadaptado a sus necesidades específicas, sin importar cuán grandes o pequeñas sean. Permítanos transformar su tienda en línea en una potencia de comercio electrónico que esté preparada para sobresalir tanto en estilo como en funcionalidad.
Contacta con Oyova Ven hoy a ver cómo nuestro equipo de profesionales puede llevar tu tienda on-line al siguiente nivel.