Different font on mobile device - Why?

[DeeJay58]

Hello!
I have a strange problem and I can't find the solution:
I used Google Fonts for my project and it actually works quite well on the PC. However, a completely different font ) is displayed on the iPhone and iPad.
I just don't understand why, so after a long search I decided to ask in the forum.

It's about the blue-green font at the top left. Where could my mistake be in the settings?

Here is the project (not yet finished): https://virtualtour.dronepix.at/Schulen/MsStallhofen/

Thank you for your help!

[Hopki]

Hi,
Interesting, what font did you use?
Let us know then we can do some investigating.
But looks like the font is different on iOS, different again on Android, so all three devices all show something diffrent.
Pano2VR is only using the CSS style sheet so this may be a Google issue, but as said please let us know the font you used so we can investigate.
Regards,

[DeeJay58]

Hello!

Thanks for the answer so late at night.
I have now used this font: https://fonts.google.com/specimen/Comic+New?query=comic
However, I had this one before: https://fonts.googleapis.com/css2?family=Bigelow+Rules
with the same problem on this project. It had worked on another one though, so I don't think the problem is with Google Fonts.

I also attached my skin file, I am sure the error can be found there

Thank you!

[360Texas]

Font issues can be an interesting issue to follow up.

Fonts used in creating your website are based on fonts that you have on your computer. Your personal fonts may not be easily transferred to your server website then viewed by web site visitors browser. Mostly because your website visitors computer may not have those same font styles.

That is why you probably employ..... in your website code should use generic or universal font styles the can be replicated on both desktop and cell phone compatible. OR your website page code should upon entry to your site download your unique font style which is temporary as long as they are on your site.

Language fonts are unique like European languages use the umlauted characters while the English language does not use that character style.

(more 9 Oct 21)
I googled 'What font family is used in Android 10 (for my Samsung s9 cell)"

I found this:

What font is used in Android 10?
And now, as Android 10 actively pushes for universal accessibility and ease of use, a compact and easy-to-read typeface like Roboto continues to be the best option Google has going forward for fonts for the operating system's GUI.

And of course as Android o/s continues to be developed different font style will probably added Google.

To make this issue really interesting... Google's Chrome Browser also has its own family of fonts.

- Possible solution This might push your font style to your visitors computer -

How to install a font to your website
Fonts live on the visitor's browser. This means all you need to do is supply HTML code defining the font you want to use, such as this snippet.

Code: Select all

<SPAN STYLE="font-family: Tahoma, Arial, sans-serif;">Your message!</SPAN>
 

The visitor will come to your site, and their browser will use the first font you indicate. If the specified font is not available, the browser will pick from your list of alternate fonts or something from the same font family. If none of your font choices are found, the browser will use whatever font it prefers.

[Hopki]

Hi,
Using the Google Font page as a reference:

Screenshot 2021-10-11 at 10.22.56.png (111.55 KiB) Viewed 2100 times

In your skins external CSS:

Code: Select all

https://fonts.googleapis.com/css2?family=Comic+Neue

However, it should be:

Code: Select all

https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap

Then in the text box's CSS Styles Inner Element:

Code: Select all

font-family: 'Comic Neue', cursive;
color:teal;
text-shadow: 2px 2px 8px black;

Once set the font shows exactly the same on the desktop, iOS using mobile Safari and Android using mobile Chrome.
Regards,

[DeeJay58]

Hi Hopki!

Thank you so much! I think I understand and I will try it tonight.

Thank you for the best suport ever! And thank you to 360Texas too for all the information. I've learned a lot!

Mario

[360Texas]

I read important security links all sites are secure https:// - > https://

preconnect to Google
preconnect to gstatic
Permission to go from one domain to another domain "crossorigin"
actual call to swap specific family fonts style files to be copied

Information acquired by Google Searching
----
The preconnect keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin

gstatic.com is a google owned domain where it hosts its static content, mainly images. The main purpose of this domain is for improving the performance of other sites, and not to build a site.

The crossorigin attribute sets the mode of the request to an HTTP CORS Request. Web pages often make requests to load resources on other servers. ... A cross-origin request is a request for a resource (e.g. style sheets, iframes, images, fonts, or scripts) from another domain. CORS is used to manage cross-origin requests.

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" read possibly "preconnect" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
--------
Hey ! I learned something new today. Should put this in our Lessons Learned note book.

Thanks