[Support request] Mobile not recognizing a font but desktop is

[Cynthia]

I am trying to modify this line of text on the home page: Where Creativity & Ingenuity Meet (website url in private area)

I’ve added this to the Custom CSS as there is no font option Northwell in the font selections. Northwell displays on desktop but not on my Android phone.

h5 {font-family:Northwell,Helvetica,Arial,Lucida,sans-serif;}

@media (max-width: 768px) {h5 {font-family:Northwell,Helvetica,Arial,Lucida,sans-serif;}}

However, this website has no problem display the Northwell font: http://www.taramullarkey.com/

Is there something additional I need to add to make it display on mobile?

[Fernando]

Hi Cynthia,

You’ll need to host this font locally or enqueue this font manually if it’s served by some host for it to appear.

Currently, I believe the font is working for your desktop because you have that font installed in your device. On devices, that don’t have this font, the font wouldn’t appear which is also the case from my end: https://share.getcloudapp.com/7KuQpkgY

To resolve this, as mentioned, one approach is to host the font locally.

See this for reference: https://docs.generatepress.com/article/adding-local-fonts/

You can also refer to this for the creation of @font-face rules which is one of the steps in the link above: https://generatepress.com/forums/topic/custom-fonts-not-google/#post-2166702

Hope this clarifies. 🙂

[Cynthia]

Hi Fernando –

While following the video, when loading my font files to WordPress, I got this error message for 1 of the font files:

Northwell-Regular.ttf Sorry, you are not allowed to upload this file type.

The others loaded fine though. But because I can’t load the .ttf format, the /* Safari, Android, iOS */ is not working still.

I added the code snippet just as instructed and it appears Leo was able to load the .ttf format with the example font with no issues.

:/

BTW I also tried uploading the Northwell-Regular.ttf file manually and it’s still not work on mobile.

[Cynthia]

Does it matter that Northwell is not found in the Google Tool https://google-webfonts-helper.herokuapp.com/fonts/ ?

I downloaded the font-family from here: https://www.onlinewebfonts.com/search?q=Northwell

It will work because I can see that font on my Android on the http://www.taramullarkey.com/ website.

[Fernando]

It doesn’t matter if it isn’t found in the Google tool. Adding it as a local font should allow you to use it in your website.

Try adding define('ALLOW_UNFILTERED_UPLOADS', true); in your config.php.

You should be able to add .ttf afterwards.

You’ll need to access your FTP to do this. Kindly reach out to your hosting provider for assistance with regards to this.

Reference: https://kinsta.com/knowledgebase/sorry-this-file-type-is-not-permitted-for-security-reasons/#:~:text=Here%E2%80%99s%20how%20to%20set%20it%20up

Tested the font on my test website and it works as expected: https://share.getcloudapp.com/eDu5jjOd

Kindly let us know how it goes. 🙂

[Cynthia]

I am still not having any success on my Android phone

I’ve added a screenshot taken from my Android below after I made the updates you suggested.

I also recorded my screen so you can see everything I did and let me know if I’ve missed a step.

[Ying]

Hi Cynthia,

1. None of the URL in your @font-face CSS is working, you can check by enter the URL to your browser to test.

You can get the correct file link in the media library.

2. The Font name you added to customizer > fonts should match the one you are using in the @font-face CSS.

3. The font only works on your computer, it doesn’t work on mine. I assume your computer has the font locally installed, that’s why it shows in your customizer.

[Cynthia]

I was able to resolve the original isse with the Northwell font, however I now have another issue. My client wanted a different font for the letter M in the the word “Meet” on the line of text that says Where Creativity & Ingenuity Meet. (Night-in-Paradise font)

I was able to follow all of the previous instructions and successfully update the M with the following code (with Firefox & Mobile) – but I’m noticing that safari browser is not reflecting is correctly and my client also said it’s not working on Chrome for her either but she’s on a Mac. It shows correctly on Chrome for me on my PC

/* Night-in-Paradise-regular – latin */

@font-face {
font-family: ‘Night-in-Paradise-Regular’;
font-style: normal;
font-weight: 400;
src: url(‘http://cynthiab53.sg-host.com/wp-content/uploads/2022/03/fonts/Night-in-Paradise-v12-latin-regular.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘http://cynthiab53.sg-host.com/wp-content/uploads/2022/05/Night-in-Paradise-v12-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://cynthiab53.sg-host.com/wp-content/uploads/2022/05/Night-in-Paradise-v12-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://cynthiab53.sg-host.com/wp-content/uploads/2022/05/Night-in-Paradise-v12-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://cynthiab53.sg-host.com/wp-content/uploads/2022/05/Night-in-Paradise.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://cynthiab53.sg-host.com/wp-content/uploads/2022/05/Night-in-Paradise-v12-latin-regular.svg#Night-in-Paradise’) format(‘svg’); /* Legacy iOS */
}

I have added a screenshot that she sent me and how it’s suppose to look vs. what my client sees in safari

this is the html: <h5 style=”text-align: center; top-margin: 10px; bottom-margin: 20px;”>Where Creativity & Ingenuity <span class=”letterm”>M</span>eet</h5>

here is the class code:

.letterm {
font-family: Night in Paradise;
color: #d1b14f;
font-size:37px;
padding-right:5px;
}

[Ying]

What’s the font name you are using in your CSS? Is it Night-in-Paradise-Regular?

As I replied before, the font name you enter in customizer or CSS have to match the font name you are using in @font-face CSS.

[Author]

Posts