Font family on mobile menu - Support | Kriesi.at

Viewing 23 posts - 1 through 23 (of 23 total)

Author

Posts
April 6, 2021 at 11:18 am #1292733

Maarten
Participant

Hello Enfold support,

When i look at the website i’m working on (see link below in private part) at my smartphone and open the hamburger menu i see some kind of Times font family but when i look in my browser (Chrome) in inspection mode than i see the font that i want (gothamrounded-mediumitalic). How can i fix this so the font family on my smartphone is the same?

Thanx,
Maarten

April 6, 2021 at 6:01 pm #1292874

Nikko
Inactive Moderator

Hi Maarten,

What are the file extensions for the font you have uploaded? did you include .ttf, .eot, .woff, .woff2 and .svg?

Best regards,
Nikko

April 7, 2021 at 8:52 am #1293001

Maarten
Participant

Hello Nikko,

I only uploaded the .ttf version. Should i upload all the versions within the same .zip font file? I noticed that the font lookes good on a android mobile but not on a iPhone.

Best regards,
Maarten

April 7, 2021 at 9:03 am #1293004

Maarten
Participant

Hello Nikko,

I’ve added the .eot, .woff, .woff2 and .svg version to the same .zip file and cleared history and data from the iPhone but the font still lookes like a kind of Times font.

Best regards,
Maarten

April 8, 2021 at 4:38 pm #1293324

Nikko
Inactive Moderator

Hi Maarten,

Can you try to clear the browser cache of your phone?
Also, try using other fonts to check whether it’s just this font or all other uploaded fonts.

Best regards,
Nikko

April 9, 2021 at 8:25 am #1293437

Maarten
Participant

Hello Nikko,

I already cleard the cach of my phone many times and tried two different browsers. Do you have a fontfile that you know works okay? That way i can experiment with a file that works.

Best regards,
Maarten

April 10, 2021 at 7:22 am #1293612

Nikko
Inactive Moderator

Hi Maarten,

You can try this font: https://www.fontsquirrel.com/fonts/berks hire-swash
Then click Webfont Kit and make sure to check WOFF, TTF, EOT and SVG then click DOWNLOAD @FONT-FACE KIT button.
Extract the downloaded zip file and find the berkshireswash_regular_macroman folder (inside web fonts folder) and zip it.
Go to Enfold > Import/Export > Custom Font Manager and upload berkshireswash_regular_macroman.zip
Go to Enfold > General Styling > Fonts (tab) > Heading Font > set this to berkshireswash regular macroman (400) it should be located at the bottom of the dropdown.

Best regards,
Nikko

April 12, 2021 at 9:55 am #1293881

Maarten
Participant

Hello Nikko,

I tried the berkshirewash font and i removed all custom CSS font-family lines to my disired font (gothamrounded-mediumitalic) and i see the berkshirewash font on for instance this page: http://dev.denkruim.nl/over-interieur/. The hamburgermenu also has the berkshirewash font on dekstop and on my iPhone but the desktop menu has the wrong font: Muli.

Thats why i added this custom CSS:

span.avia-menu-text {
font-family: ‘berkshireswash-regular-macroman’;
}

Now everything is ok so i changed the font back to gothamrounded-mediumitalic and the problem is back to! So maybe the problem is the font itself? When i compare both fontfiles i can see an extra CSS file in the berkshirewash font so i added the same file (ofcourse i’ve changed the font names) but this has no positive effect. I think the CSS file was only there because of the berkshireswash-regular-demo.html file.

Do you have any ideas how to solve this problem?

Best regards,
Maarten

April 14, 2021 at 6:57 am #1294248

Ismael
Moderator

Hi,

Thank you for the update.

This is how we see the page on our end.

Screenshot: https://imgur.com/o3TjTGO

Is that how it supposed to look? The font gothamrounder-mediumitalic seems to be loading properly.

Request URL: http://dev.site.nl/wp-content/uploads/avia_fonts/type_fonts/gothamrounded-mediumitalic/gothamrounded-mediumitalic.ttf
Request Method: GET
Status Code: 200 OK (from memory cache)
Remote Address: IP ADDRESS
Referrer Policy: strict-origin-when-cross-origin

Best regards,
Ismael

April 14, 2021 at 8:39 am #1294272

Maarten
Participant

Hello Ismael,

I think you understood me wrong. On desktop and Android mobile there is no problem, there is only a problem on the iPhone. Despite clearing cache, data and trying two different browser

Best regards,
Maarten

April 15, 2021 at 11:28 am #1294550
Ismael
Moderator
Hi,

I see. Sorry about that, and thank you for the clarification. I do not have access to an iPhone right now, so I will forward the thread to other moderators. Please wait for their response.

This css code might help.
```
.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    font-family: 'gothamrounded-mediumitalic';
    letter-spacing: normal;
    text-transform: uppercase;
    font-weight: 400;
}
```
After adding the code, please toggle or temporarily disable the Enfold > Performance > File Compression settings, then try to check the site on incognito mode, just to make sure that the page is not cached.

Best regards,
Ismael
April 15, 2021 at 4:13 pm #1294588

Maarten
Participant

Hello Ismael,

I’m sorry to tell you that this solution did not work.

Best regards,
Maarten

April 16, 2021 at 5:32 am #1294678

Ismael
Moderator

Hi!

Thank you for the update.

It seems to be working properly on our end, as shown in the screenshot below.

Screenshot: https://imgur.com/L078trT

Did you purge the cache or remove the browser history in your phone?

Regards,
Ismael

April 16, 2021 at 8:48 am #1294731

Maarten
Participant

Hello Ismael,

The screenshot is not an iPhone is it? I told you before that the problem is only on the iPhone.

Best regards,
Maarten

April 18, 2021 at 2:52 pm #1294997

Nikko
Inactive Moderator

Hi Maarten,

I believe the problem is with the font itself since you have already included all the font format needed for it to render on all devices.

Best regards,
Nikko

April 19, 2021 at 8:27 am #1295143

Maarten
Participant

Hello Nikko,

Is is correct that the .ttf format is used on the iPhone? So maybe this fontfile is causing the problem?

Best regards,
Maarten

April 19, 2021 at 8:44 am #1295151

Nikko
Inactive Moderator

Hi Maarten,

That’s also possible.
I’m not quite sure which one is fetched since both ttf and woff are supported.
Reference:
– https://caniuse.com/?search=ttf
– https://caniuse.com/?search=woff
Try to convert the fonts using online font converters like https://cloudconvert.com/ hopefully this should help with the issue though it’s hard to think that the font file is corrupt since it’s working properly on other devices.

Best regards,
Nikko

April 19, 2021 at 8:50 am #1295156

Maarten
Participant

Hello Nikko,

But in your message from april 18 you wrote that the font itself is probably the problem. So what can i do to solve this problem?

Best regards,
Maarten

April 19, 2021 at 11:53 am #1295240

Nikko
Inactive Moderator

Hi Maarten,

What I meant with I think the font itself is the problem not in a way that font’s file is corrupted since it is read by other devices but maybe it could not be rendered in iphones (but this is just a theory).
I think the workaround is to find a font that’s similarly looking to gothamrounded which works on iphone and other devices.

Best regards,
Nikko

April 21, 2021 at 8:37 am #1295719

Maarten
Participant

Hello Nikko,

When a font file cannot be rendered in iphones there has to be a problem with the font file because i can not image that a iphone sees the difference between fonts. Do you have the possibility to test the font file that i use? I’ve send the the login credentials some time ago so you can download it from the website.

I’ve converted the original .otf file again with the converter you suggested and uploaded it again to the website after deleting the old one but the results still stay the same.

Best regards,
Maarten

April 22, 2021 at 5:59 am #1295923

Nikko
Inactive Moderator

Hi Maarten,

Unfortunately, I don’t have any IOS device to test with.
Can you try to use this font file: https://ufile.io/ctsu6svx
I found the font you mentioned in this link: https://fontsgeek.com/fonts/Gotham-Rounded-Medium-Italic then converted it to EOT, TTF, SVG, WOFF, WOFF2.
I hope this resolves the issue, if not then I’ll try to ask my colleagues who have an iPhone to check.

Best regards,
Nikko

April 22, 2021 at 8:26 am #1295952

Maarten
Participant

Hello Nikko,

I have to thank you from the bottom of my heart because you solved my problem! Thank you very much for you patience and your time.

Kind regards,
Maarten

April 22, 2021 at 11:03 am #1295992

Nikko
Inactive Moderator

Hi Maarten,

You’re welcome and thanks for your kind words. :)
I’m very happy to hear that the font file worked properly.
Thanks as well for being patient and also thanks for using Enfold.
Have a great day!

Best regards,
Nikko
Author

Posts

Viewing 23 posts - 1 through 23 (of 23 total)

The topic ‘Font family on mobile menu’ is closed to new replies.