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.
Gracias 🙂
Contenido solo visible a usuarios registrados
Respondido : 19/11/2020 10:05 am
Karen Rios
Soporte CMS WebempresaModerator
Hola Sergio,
Al ingresar en tu sitio web desde Mozilla, Chrome, Opera veo la misma tipografia que en móvil
Puedes indicarnos cual es la tipografia que debe aplicarse en esta sección?
Un Saludo
Respondido : 19/11/2020 11:24 am
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
Soporte CMS WebempresaAdmin
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
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.
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
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
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;
Puedes comprobar añadiéndolo de la siguiente forma
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
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?
Gracias
Respondido : 20/11/2020 1:28 pm
Karen Rios
Soporte CMS WebempresaModerator
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
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
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
Soporte CMS WebempresaModerator
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
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>
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
En la sección que te menciono de Divi debes añadir por ejemplo
¿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
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
Soporte CMS WebempresaModerator
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 .
