Foros
Ayuda WordPress en ...
Soporte Divi en esp...
Problema tipografía
Avisos
Vaciar todo

[Resuelto] Problema tipografía  

Página 1 / 2
    Último Mensaje
 
Sergio
 Sergio
Usuario experto

Buenos días,

Cuando he realizado el responsive para móvil, se ve todo igual desde la previsualización del ordenador. Sim embargo, cuando me meto en la página web desde mi móvil, la tipografía es distinta, ¿cómo puedo arreglar esto?

Adjunto imagen de vista previa móvil desde Divi y vista desde mi móvil.

Captura de pantalla 2020 11 19 a las 11.02.48
IMG 1473

 

Gracias 🙂

Contenido solo visible a usuarios registrados

Respondido : 19/11/2020 10:05 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Sergio,

Al ingresar en tu sitio web desde Mozilla, Chrome, Opera veo la misma tipografia que en móvil

imagen
imagen

Puedes indicarnos cual es la tipografia que debe aplicarse en esta sección?

Un Saludo

 

Respondido : 19/11/2020 11:24 am

Sergio
 Sergio
Usuario experto

@karen Buenos días Karen, esa no es la tipografía que debe salir. Es la siguiente: Barlow Condensed Light, en las palabras que están en cursiva se cambia la tipo. En principio haciendo pruebas en el único buscador que nos da problemas es en Safari (de Apple), en Chrome debería verse bien, pero por las capturas que me envías tampoco sale.

¿Qué puedo hacer?

Gracias 🙂

Respondido : 20/11/2020 10:25 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola sergio.

Tienes la web en mantenimiento, por favor abre la web para que podamos revisarlo 😉 

 

Un saludo

Respondido : 20/11/2020 10:28 am

Sergio
 Sergio
Usuario experto

Hay dos tipografías, la general que es Barlow Condensed Bold, y la que te menciono que se ve mal que es Barlow Condensed Light, que es la que aplicamos en las letras que están cursivas.

Respondido : 20/11/2020 10:28 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hoa Sergio.

Por favor abre la Web y lo revisamos.

 

Un saludo

Respondido : 20/11/2020 10:29 am

Sergio
 Sergio
Usuario experto

@pepesoler

Hola! Ya esta abierta

Respondido : 20/11/2020 10:34 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Sergio,

Usualmente Divi usa fuentes de google pero si no se encuentra debes instalarla. Comprueba lo siguiente, verifica tienes activo el uso de las fuentes de google desde Divi -> Opciones del tema dentro de la pestaña General

Screenshot

Si esta activo pero aun no se muestra es posible que debas instalar la fuente, tienes dos opciones para incluirla. Puedes descargarla desde el repositorio de google font y luego subir los archivos en el modulo que necesitas, para ello te sugiero revisar el siguiente hilo de foro donde se explica de forma detallada como instalarla.

También puedes añadirla desde las opciones de Divi -> Opciones Generales -> Integración en la sección que indica Agregar código al <head> de su blog, dentro de esta sección tendrías que añadir el código con todas las fuentes que te da google por ejemplo

Screenshot
Screenshot

De igual forma veo que la regla CSS la estas añadiendo con el nombre Barlow Condensed Light, la forma correcta sería añadirla solo con Barlow Condensed y configurar el peso de la fuente, tn en cuenta las indicaciones que indica google font.

CSS rules to specify families

font-family: 'Barlow Condensed', sans-serif;
Screenshot

Puedes comprobar añadiéndolo de la siguiente forma

<h1 style="color: white;"><strong>CONVIÉRTETE</strong><br /> <span style="color: #ffffff; font-family: 'Barlow Condensed'; font-weight: 400;"><em>EN UN</em> </span><strong>LÍDER</strong></h1>

Comprueba eso y verifica si al hacerlo ya tu fuente se ve de forma correcta en el titulo que deseas de tu sitio web

Nos comentas como ha ido todo

Un Saludo

Respondido : 20/11/2020 11:31 am

Sergio
 Sergio
Usuario experto

@karen Hola Karen, si añado font-family: 'Barlow Condensed', sans-serif; ya me sale, será por la serifa en la tipografía. Lo único que se desconfigura el tamaño de la fuente en móvil. En web es mucha más fina, habría alguna forma de que saliera igual?

IMG 1502
Captura de pantalla 2020 11 20 a las 13.59.08

Gracias 

 

Respondido : 20/11/2020 1:28 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Sergio,

Puedes probar añadir una clase a tu titulo con la cual puedas luego asignar un tamaño de fuente para tu versión móvil, por ejemplo el código de tienes ahora en el titulo quedaría

<h1 class="titulo" style="color: white;"><strong>CONVIÉRTETE</strong>
<span style="color: #ffffff; font-family: 'Barlow Condensed', sans-serif; font-weight: 400;"><em>EN UN</em> </span><strong>LÍDER</strong></h1>

Luego debes incorporar el siguiente código CSS en el apartado Apariencia -> Personalizar -> CSS Adicional

@media only screen and (max-width: 467px) {
.titulo {
font-size: 50px !important;
}
}

Con esto puedes establecer el tamaño de la fuente para móvil y verificar si no se desconfigura su visualización

Un Saludo

Respondido : 20/11/2020 1:45 pm

Sergio
 Sergio
Usuario experto

@karen Hola Karen, lo único que me has puesto font-size 50px, y lo que quiero poner es la letra mas fina, es decir font-weight 400px, pero solo a una parte de la frase. He probado así:

@media only screen and (max-width: 467px) {
.titulo {
font-weight: 400px !important;
}
}

Pero no funciona, creo que es porque se aplica a todo el texto, y solo debe aplicarse a las palabras "en un". ¿Qué puedo hacer?

Gracias
Respondido : 21/11/2020 11:54 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Sergio, 

Entiendo, en este caso veo que añades las reglas CSS dentro de las etiquetas de los títulos. Tienes que tener en cuenta que al hacer esto no se aplicarán otras reglas ya que tendran prioridad estas reglas que estas añadiendo.

Si deseas añadir otro estilo a la versión móvil de la palabra que se encuentre en EN UN debes agregarle otra clase dentro de la etiqueta spam por ejemplo titulo-2 y con esta clase poder añadir las reglas CSS para la versión móvil, por ejemplo

<h1 class="titulo" style="color: white;"><strong>CONVIÉRTETE</strong><br>
<span class="titulo-2" style="color: #ffffff; font-family: 'Barlow Condensed', sans-serif; font-weight: 400;"><em>EN UN</em> </span><strong>LÍDER</strong></h1>

Luego podrás añadir la regla para que esta fuente con la clase titulo-2 se modifique en versión movil como deseas

@media only screen and (max-width: 467px) {
.titulo-2 {
font-weight: 100 !important;
}
}

También debes tener en cuenta tener todas las variaciones instaladas en tu sitio web de la fuente Barlow Condensed ya que puedo ver que no se están aplicando, para ello solo debes ingresar como te comente anteriormente en el apartado de Integración de Divi y añadir todas las fuentes en la etiqueta </head>

Respondido por: @karen

También puedes añadirla desde las opciones de Divi -> Opciones Generales -> Integración en la sección que indica Agregar código al <head> de su blog, dentro de esta sección tendrías que añadir el código con todas las fuentes que te da google por ejemplo

ScreenshotScreenshot
 

En la sección que te menciono de Divi debes añadir por ejemplo

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
Screenshot

Verifica esto y nos comentas como ha ido todo

Un Saludo

 

 

Respondido : 21/11/2020 12:39 pm

Sergio
 Sergio
Usuario experto

¿Tengo que añadir el código con todas las fuentes de la familia Barlow Condensed que te da google o solo las que yo utilizo?

Respondido : 22/11/2020 1:49 pm
Sergio
 Sergio
Usuario experto

Si pongo el código q me mandaste con todas las fuentes, me desaparece todo el texto de la página

Respondido : 22/11/2020 1:53 pm

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Sergio,

No tienes que agregarlas todas, puedes añadir solo las que utilizas, si es posible envíanos una captura como se muestra cuando añades las fuentes.

Comprueba que estas sean las fuentes que se este configurando ya que por ejemplo si añades 'Barlow Condensed' estas agregando toda la fuente y es probable tengas que indicarle al texto que tipo de variación usara para su peso ya sea font-weight 400, 300, 200 .

Un Saludo

Respondido : 22/11/2020 3:40 pm
Página 1 / 2
  Todos los temas de este foro
  Tema anterior
Siguiente debate  

Actualmente viendo este post 1 invitado.