Font on desktop is not the same on mobile for plugins

[rehumanizeinstitute]

Hi! I am having problems getting the same font to show on mobile on the plugins as it is on the website. We have web fonts installed, I have tried clearing the cache and editing the custom CSS to force it to show up as the right font - none of it has unfortunately worked.

Here is a photo of what it looks like on my mobile (iOS, iphone 11 pro if that helps)

This is how it shows up on a new web page I am building. I have the E&P Form Builder plugin enabled here:

I have also encountered the same issue on mobile for a web page that is currently live (sunordic.org/faculty) where I have the Essential Grid plugin enabled.

What can I do to fix it? Thanks in advance for your help.

[ruenel]

Hello Nicolette,

Thanks for posting in! I have checked the faculty page and it seems that the Ess. Grid is using Proxima Nova as the main font family. You are using this css code to load the font:

@font-face{
    font-family:"Proxima Nova";
    font-display:"auto";
    src:url("https://sunordic.org/wp-content/uploads/2019/10/ProximaNova-Black.ttf") format('truetype');
    font-weight:600;
    font-style:regular;
}
@font-face{
    font-family:"Proxima Nova";
    font-display:"auto";
    src:url("https://sunordic.org/wp-content/uploads/2019/10/ProximaNova-Bold.ttf") format('truetype');
    font-weight:700;
    font-style:regular;
}
@font-face{
    font-family:"Proxima Nova";
    font-display:"auto";
    src:url("https://sunordic.org/wp-content/uploads/2019/10/ProximaNova-Light.ttf") format('truetype');
    font-weight:300;
    font-style:regular;
}
@font-face{
    font-family:"Proxima Nova";
    font-display:"auto";
    src:url("https://sunordic.org/wp-content/uploads/2019/10/ProximaNova-Regular.ttf") format('truetype'),url("https://sunordic.org/wp-content/uploads/2019/10/ProximaNova-Semibold.ttf") format('truetype');
    font-weight:500;
    font-style:regular;
}

If you analyze the code, they all have the same font family name: Proxima Nova. And then in your other custom css, you reference the font names as “font-family:‘Proxima Nova Black’;”, “font-family:‘Proxima Nova Bold’;” .

Please edit your custom css and make sure that you are adding the correct font name for each font file in the @font-face code. To learn more about how you can properly use the @font-face, please check this out:

• https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
• https://css-tricks.com/snippets/css/using-font-face/

[rehumanizeinstitute]

Hi again Rue Nel (also just realised you have been helping me with the license transfer!)

That makes so much sense now, I changed it to Proxima Nova now for the grids and it shows up great on mobile. Thank you so much!!

I have two more questions in relation to Essential Grid (and possibly a few more, I’m trying to implement a bit more content into the website during this slow period so there’s a lot of trial and error).

1. I can’t seem to get the font family to work for the nav/filter bar in Essential grid on Mobile. Where can I change the font family for this section?

2. I am trying to remove this black bit on the bottom that shows up when I hover over the image and I can’t figure out which setting removes this in Essential Grid. Do you know how that might be possible?

[friech]

Hi Nicolette,

1. To edit an Essential Grid Filter, you need to know a bit of CSS, under the Skins tab, see the Navigation Edit Skin, this is the CSS of the chosen skin Navigation (filter), so be careful with it.

• 
  
  
  

Find the font-family property and replace it with the name of your custom font.

More details here.

2. That is actually the “scroll to top button”, there is a CSS that is not from the theme that is messing it on mobile.

@media screen and (max-width: 800px) {
	.left, .main, .right {
	    width: 100%;
	}
}

I can’t point where was that added though, is that your custom CSS? please remove or edit that in a way that it won’t affect the “scroll to top button”.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

[rehumanizeinstitute]

Hi Friech, thank you SO much!!! I made the changes on the skin now so the font shows up right. As for the response to 2, I’ll find it and take it off. I am not sure what it was for either. I took over editing the pages on the website from a previous co-worker who has left, so still trying to figure out what all the custom changes are to the specific pages.

Really appreciate your help! This forum has also been a huge lifesaver.

[rehumanizeinstitute]

Hi again - I removed the code but it didn’t make a difference. I realised that you may have thought it was something else in the screenshot that I was referring to. It is not the “scroll to top button” that I was trying to remove (though I am also aware that it doesn’t quite work for the website, so I’m thankful for the fix on that too!)

This is the bit I was talking about that I’d like to remove. I have indicated the area as a pink box in the screenshot below. It is showing up on the pictures in the Essential Grid plug-in. I used an Ess Grid template to set this up so I think it’s from the template, but again, I can’t quite figure out how to remove it away completely.

[ruenel]

Hello Nicolette,

You will need to edit your Grid Skin template. You should be able to remove the black gradient when editing the grid skin. To know more how you can edit the Essential Grid skin, please check out this documentation:

• https://www.themepunch.com/essgrid-doc/item-skin-editor/

Hope this helps.