font set in rev slider does not display correctly on mobile/tablet

DebsWebs

Hi,

I have set the font to display in my revolution slider on the home page to Arial bold. However, when I view the site on mobile devices (tablet in both landscape and portrait, iphone) it displays the text in Times or some other font that is a serif font. How can I get it to display with the correct font?

On the desktop browser it does display correctly even when I reduce the width of my browser all the way down to the phone width. But on the actual devices it does not display the correct font.

https://www.earthfieldtechnology.com. I am referring to the three lines of text that say "UNRIVALED EXPERIENCE" "UNPARALLELED RESULTS" and "WORLDWIDE MAGNETIC/GRAVITY/AGG/FTG SPECIALISTS"

Phil

Hey,

Please follow the tips mentioned in this article:

https://support.muffingroup.com/faq/troubleshoot-guide/

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DebsWebs

Thank you. And I apologize for the delay getting back to you regarding this issue. I have done all of the things suggested in the troubleshooting guide to no avail. The text in the Slider is still a serif font when I have specified an san-serif font. Here's the developer info for the slide:

<rs-layer id="slider-2-slide-2-layer-5" data-type="text" data-tsh="c:rgba(0,0,0,0.5);h:5px,2px,2px,1px;v:5px,2px,2px,1px;b:5px,2px,1px,0px;" data-rsp_ch="on" data-xy="xo:99px,52px,39px,24px;yo:621px,331px,351px,216px;" data-text="w:normal;s:50,26,39,24;l:90,48,36,22;fw:900;" data-dim="minh:0px,none,none,none;" data-frame_0="x:left;" data-frame_1="sp:0;" data-frame_999="o:0;st:w;sR:9000;" style="z-index: 9; font-family: &quot;Arial Black&quot;, Gadget, &quot;sans-serif&quot;; text-transform: uppercase; height: auto; width: auto; color: rgb(255, 255, 255); text-decoration: none; white-space: nowrap; min-height: 0px; min-width: 0px; max-height: none; max-width: none; text-align: left; line-height: 33px; text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; letter-spacing: 0px; font-weight: 900; font-size: 36px; backdrop-filter: none; filter: none; transform-origin: 50% 50%; opacity: 1; transform: translate(0px, 0px); visibility: visible;" class="rs-layer" data-idcheck="true" data-stylerecorder="true" data-initialised="true">Unparalleled Results 

</rs-layer>

but it is displaying like this image. You can see that the 3 lines of text are a serif font.

Do you have any other ideas for me to try?

Phil

Please send us the WordPress dashboard access privately through the contact form, which is on the right side at https://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!

Please attach a link to this forum discussion.

Sending incorrect or incomplete data will result in a longer response time.

Therefore, please ensure that the data you send are complete and correct.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Phil

Arial is a Windows font that MacOS or iOS do not support.

You must upload this font to your server or change it to some other font, e.g., one of the Google Fonts.

Check how it looks with Roboto on iPhone:

I have temporarily changed the first text in your slider.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DebsWebs

So I changed it to use Montserrat, and now it is displaying as expected. Thank you so much. I had never heard that MacOS or iOS don't support Arial.

Thank you for your help!!