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!
Different font on mobile device - Why?
- Hopki
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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,
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,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
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!
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!
- Attachments
-
- Mittelschule Stallhofen.ggsk
- (106.92 KiB) Downloaded 109 times
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
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:
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.
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.
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:
And of course as Android o/s continues to be developed different font style will probably added Google.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.
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>
- Hopki
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
Using the Google Font page as a reference:
In your skins external CSS:
However, it should be:
Then in the text box's CSS Styles Inner Element:
Once set the font shows exactly the same on the desktop, iOS using mobile Safari and Android using mobile Chrome.
Regards,
Using the Google Font page as a reference:
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,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
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
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