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 .
Utilizamos cookies en nuestra web con una finalidad funcional y analítica. Las cookies nos ayudan a mejorar tu experiencia de navegación y a mostrarte contenidos personalizados. Puedes aceptar todas las cookies o configurar los ajustes para establecer tus preferencias.
Nuestra web utiliza diferentes tipos de cookies para mejorar tu experiencia de navegación. Las cookies necesarias se almacenarán en tu navegador porque son imprescindibles para las funcionalidades básicas de la web. También usamos cookies que nos ayudan a analizar cómo usas nuestra web para poder realizar mejoras y mostrarte contenidos personalizados. Estas cookies solo se almacenarán en tu navegador si tú lo aceptas. Si prefieres desactivarlas puedes hacerlo, pero ten en cuenta que esto afectará a la calidad de tu experiencia de navegación. Puedes ver más detalles sobre nuestras políticas de privacidad y uso de cookies la sección de Información Legal.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duración
Descripción
cookielawinfo-checkbox-advertisement
1 year
Set by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
PHPSESSID
session
This cookie is native to PHP applications. The cookie is used to store and identify a users' unique session ID for the purpose of managing user session on the website. The cookie is a session cookies and is deleted when all the browser windows are closed.
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Cookie
Duración
Descripción
lux_uid
30 minutes
This cookie is set by the Eventbrite. This cookie is used for enabling the function of ticket purchasing. This cookie helps in event booking and ticketing services.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Cookie
Duración
Descripción
_ga
2 years
The _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
_ga_FETMGBGZQS
2 years
This cookie is installed by Google Analytics.
_gcl_au
3 months
Provided by Google Tag Manager to experiment advertisement efficiency of websites using their services.
_gid
1 day
Installed by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Cookie
Duración
Descripción
test_cookie
15 minutes
The test_cookie is set by doubleclick.net and is used to determine if the user's browser supports cookies.