👻 Halloween Treat: Our biggest-ever 25% OFF memberships — use SPOOKYSOCIAL before Nov 1! 🎃

BuddyDev

Search

Theme uses other font on mobile

  • Participant
    Level: Guru
    Posts: 504
    Daniel on May 5, 2023 at 7:42 pm #49400

    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
    Daniel

  • Keymaster
    (BuddyDev Team)
    Posts: 25196
    Brajesh Singh on May 8, 2023 at 8:51 am #49402

    Hi 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
    Brajesh

  • Participant
    Level: Guru
    Posts: 504
    Daniel on May 12, 2023 at 8:23 pm #49481

    Hi Brajesh,

    Thanks for your feedback, will have a look.

    I guess I can put a new CSS code with syntax @media and add font: poppins; in order that the mobile version will take the font appropriately.

    I will check if it will work.

    Regards
    Daniel

  • Participant
    Level: Guru
    Posts: 504
    Daniel on May 12, 2023 at 8:56 pm #49483

    Hi 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
    Daniel

  • Participant
    Level: Guru
    Posts: 504
    Daniel on May 12, 2023 at 9:00 pm #49484

    Hi 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
    Daniel

  • Keymaster
    (BuddyDev Team)
    Posts: 25196
    Brajesh Singh on May 12, 2023 at 11:04 pm #49489

    Hi Daniel,
    These will have no effect.

    please look for

    
@font-face

    to see if there is any suspicious font registered.

    Regards
    Brajesh

  • Participant
    Level: Guru
    Posts: 504
    Daniel on May 13, 2023 at 9:09 am #49497

    Hi 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 2 years, 5 months ago by Daniel.
  • Participant
    Level: Guru
    Posts: 504
    Daniel on May 16, 2023 at 12:42 pm #49540

    Hi Brajesh,

    I am still looking for a solution but after trying different CSS I am unable to resolve the issue.

    Shouldn’t there be a CSS code saying to the Theme to use font poppins on mobile?

    Thank you for your assistance.

    Regards
    Daniel

  • Participant
    Level: Guru
    Posts: 504
    Daniel on May 17, 2023 at 1:11 pm #49545

    Hi Brajesh,

    Actually the issue doesn’t appear anymore, it looks like it was fixed. The issue occured only on that particular mobile device and after checking with other mobiles all seemed to be normal.

    Thanks anyways.

    Regards
    Daniel

  • Keymaster
    (BuddyDev Team)
    Posts: 25196
    Brajesh Singh on May 18, 2023 at 6:13 am #49551

    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.

This topic is: not resolved