Frank Ruhl Libre font displaying as Arial font on mobile and mobile display not looking the same on mobile

[Jacqui]

Hi there,

Would you be able to assist me in getting my font to display correctly.

I’m using the Frank Ruhl Libre font on my site and it’s displaying as the Arial font when I open it on my mobile device.

Also I’m using the Superfly Menu on the site and when I open it on my mobile device, the menu items are indented and not aligning correctly but when I open the menu in the Cornerstone editor and resize the window, it doesn’t appear the same way. Now I’m struggling with getting the mobile navgation looking right because I can’t really fix something I can’t see on the desktop. How can I work around this?

[christian]

Hey @Jacqui,

I tested the Frank Ruhl Libre font in my test site and it works both in desktop and mobile. Would you mind giving us the URL of your site and screenshots of the text which turns to Arial on mobile so we could check why it’s happening?

Thanks.

[Jacqui]

I just provided the login details.

It’s on the Strategy and Design page.

Here’s a screenshot:

[christian]

Hey @Jacqui,

The issue is happening both in desktop and mobile. I see you have the Frank Ruhl Libre font set as Body Copy in Templates > Fonts. You need to choose that font in Appearance > Theme Options > Typography.

For the Superfly indentation issue, please add this to your Additional CSS

.sfm-mobile #sfm-sidebar .sfm-menu li a,
.sfm-mobile #sfm-sidebar .sfm-chapter,
.sfm-mobile #sfm-sidebar .widget-area,
.sfm-mobile .sfm-search-form input {
	padding-right: 0 !important;
}

Thanks…