Cómo modificar fuentes en tu tienda Comandia Aprende con estos consejos a modificar la tipografía de tu tienda online

fuente tienda online

El tipo de letra en una tienda online otorga carácter y personalidad a tu negocio. Si quieres darle un nuevo toque a tu tienda o un buen lavado de cara, y hacerlo fácilmente, te recomendamos seguir esta guía para que puedas insertar la fuente que más te guste en tu tienda online.

Hay dos formas de modificar la fuente tipográfica en una tienda Comandia, formas que dependen del sitio desde el cual se cargue la fuente.

.

1.      Fuente en un archivo local

Si dispone de una fuente tipográfica en un archivo local de su ordenador, primero debe descargarse la plantilla de su tienda en el ordenador. Entre en Diseño >> Plantillas >> Personalizar y, en la barra inferior, haga clic en Exportar plantilla:

Imagen 1

Automáticamente, se descargará la plantilla en un archivo comprimido zip.

Descomprima el archivo y añada el archivo de la fuente que tiene usted en el ordenador a la carpeta fonts (si la plantilla no tiene esa carpeta, cree una carpeta fonts):

Imagen 3

A continuación, comprima todo el archivo de nuevo, vuelva a Diseño >> Plantillas >> Personalizar y haga clic en Importar plantilla.

Imagen 2

Nota: si le da error “Entity too large”, elimine la carpeta template-screenshot, comprima el archivo y vuelva a importarlo.

Una vez importada la plantilla, debe ir a la carpeta CSS y al archivo principal (style.css o main.css, según la plantilla):

Imagen 4

 y modificar las primeras líneas del archivo que hacen referencia a las fuentes.

La llamada será de esta forma:

@font-face {

    font-family: ‘ Nombre de la fuente’;

    src:url(../fonts/Nombre-de-la-fuente.ttf);

}

Nota: la extensión del archivo puede variar debido a que hay varios tipos de extensiones para las fuentes.

.

2.      Fuente en un servidor online

Si la fuente está en un servidor online, cómo es el caso de Google Fonts (https://fonts.google.com/) debe copiar la URL del archivo del servidor en el que esté disponible, ir a la carpeta CSS y al archivo principal (style.css o main.css, según la plantilla) y modificar las primeras líneas del archivo que hacen referencia a las fuentes para incluir la llamada al servidor con la URL.

Para añadir la fuente a nuestra plantilla con la fuente en un servidor online utilizaremos la siguiente línea de código:

@import url(‘https://fonts.googleapis.com/css?family=Roboto’);

Nota: el punto y coma final es requisito necesario

Dentro de los paréntesis, entre las comillas, debemos introducir la URL del servidor en el que esté alojada la fuente.

fuente

Esta línea debemos introducirla, sin sustituir nada, en la línea 1 del archivo main.css/style.css que tenga la plantilla.

En cualquiera de los dos casos, hay que establecer la fuente en los estilos.

Copia este código:

* {

            font-family: ‘Nombre de la fuente’;

}

html, body, h1, h2, h3, h4, h5, h6, a, p {

            font-family: ‘Nombre de la fuente’;

}

Edita el código insertando el nombre de la fuente que quieres aplicar (en ‘Nombre de la fuente’) y pégalo al final del archivo css para que tenga más prioridad que las llamadas anteriores en tu plantilla.

.

.

¿Te ha parecido complicado el proceso o no dispones de tiempo para dedicarle a estas mejoras?

¡Contrata nuestros servicio de diseño y puesta en marcha de tu tienda online! Con Comandia Design, un equipo de diseñadores profesionales montará la tienda por ti dejándola lista para vender.

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (No hay puntuaciónes aún)
Loading...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *