Hi guys,
I have currently a problem on my website when accessing the site via mobile.
My website uses the font poppins sitewide but when accessing the website via mobile, the theme uses another font which is not set as poppins, it is kind of a basic font which makes the site look not as it should.
Do you might have a clue how I can resolve the issue in order that the theme always uses the font poppins even on mobile?
Thank you for your help which is much appreciated.
Regards
DanielHi Daniel,
Thank you for the question.
It seems like your theme or some code is loading different fonts using css media query.
I will request you to look for media query in your css files to see if it is coming from theme(it has @media syntax).Regards
BrajeshHi Brajesh,
I have actually checked the CSS and there is no CSS code that prevents the mobile version from loading poppins font
the syntax for mobile on my website is called as follows:
@media only screen and (min-width:417px) and (max-width:767px){
but do you have a clue which rule do I need to add to the syntax in order that the mobile version will take the poppins font all across the website?
Thank you.
Regards
DanielHi again,
These are the CSS codes applied on the website with syntax @media so there is no CSS saying to use another font then poppins on mobile:
@media only screen and (min-width:417px) and (max-width:767px){ .bp-nouveau #buddypress .activity-list .activity-item .activity-meta .bp-share-button { margin: 13px; position: relative; bottom: -6px; } } @media only screen and (max-width:416px){ .bp-nouveau #buddypress .activity-list .activity-item .activity-meta .bp-share-button { position: relative; bottom: -6px; } @media only screen and (min-width:417px) and (max-width:767px) { .bpfb_link_preview_url { overflow-wrap: break-word; font-size: 14px; } } @media only screen and (max-width:416px) { .bpfb_link_preview_url { overflow-wrap: break-word; font-size: 14px; } } /* Radio Stations Styling */ @media only screen and (min-width: 768px) { body.wp-radio article.page { max-width: 100% !important; margin-top: 50px; } }
Thanks for your time!
Regards
DanielHi Daniel,
These will have no effect.please look for
@font-face
to see if there is any suspicious font registered.
Regards
BrajeshHi Brajesh,
I don’t understand exactly what you mean with
@font-face
?I have tried to apply this CSS now but it had no effect
/*Use POPPINS font on mobile*/ @media only screen and (min-width:417px) and (max-width:767px){ body { font-family: poppins; } } @media only screen and (max-width:416px){ body { font-family: poppins; } } @media only screen and (min-width: 768px){ body { font-family: poppins; } }
Thank you for your help.
Regards
Daniel- This reply was modified 1 year, 5 months ago by Daniel.
Hi Daniel,
I am sorry I could not help much.Most of the time, it may happen on conditionally loading fonts and the goal of my previous reply was to search for such a snippet.
It is also feasible to apply a different font-family if the font is a native one without loading. So, searching for font-face and font-family both should be used to determine the issue.
Regards
Brajesh
You must be logged in to reply to this topic.