Page 1 of 1

Best font - no serifs - for use with mobile devices

Posted: Tue Sep 11, 2018 5:08 pm
by bry
I generally like Tahoma but it defaults to serif font with ios devices.

Which font is best for mobile use including iOS devices if i do no want serigs??

Thanks

Re: Best font - no serifs - for use with mobile devices

Posted: Tue Sep 11, 2018 5:50 pm
by Psycho
If you use anything other than a web safe font, then text may not look correct on other devices that do not have that font installed and will be substituted automatically, have a look at the link below which should help you with any font you want to add to your website

http://www.wysiwygwebbuilder.com/webfonts.html

Re: Best font - no serifs - for use with mobile devices

Posted: Tue Sep 11, 2018 6:13 pm
by bry
Thanks, i thought Tahoma was web safe. I guess not. I am away today. I will check it when i return.

Thanks

Re: Best font - no serifs - for use with mobile devices

Posted: Tue Sep 11, 2018 6:17 pm
by bry
I will switch to Verdana when i return.

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 12:48 am
by electrochrisso
Looks like Tahoma is not listed in the top 15 websafe fonts, Verdana is though.

https://websitesetup.org/web-safe-fonts-html-css/

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 4:38 am
by MichaelLloyd
According to w3schools.com and webdesigndev.com Tahoma is on the web safe font list. I like that font as well.

https://www.w3schools.com/cssref/css_websafe_fonts.asp
http://www.webdesigndev.com/16-gorgeous ... -with-css/

If page load speed is a concern, definitely choose web safe.

However, Web Builder includes excellent support for @font-face and Google Fonts. Both will ensure typeface selections are displayed as intended. With the new Google Font Manager feature, Google Fonts are likely easiest to implement, while ensuring no copyright infringements.

Regardless, Tahoma is a crisp, well designed sans-serif typeface, and I believe a descent choice.

From my research, web-safe fonts are not quite as universal as we are led to believe.
To handle the issue with iPhones not displaying Tahoma correctly, font fallback code can be implemented, example:

Code: Select all

font-family: Tahoma, Arial, Helvetica, sans-serif;
If the 1st font fails, the 2nd is tried until one works.

I believe this code should be placed in the text styles dialog box, though I don't know exactly how.

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 2:45 pm
by bry
Good point! I cannot find where to implement fall back fonts either.

Pablo, BaconFries can you tell us??

thanks

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 2:48 pm
by Pablo
There is no option for fallback fonts.
There is no need for this if you use web fonts/@font-face/google fonts.

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 3:08 pm
by bry
Thanks, i understand and will do.

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 3:19 pm
by bry
HI Michael LLoyd,

At top of WB, click on Tools, Options, then on left, Fonts and on right leave the check in Display websafe fonts only, but in the second window have "Automatically use @font-face for non web-safe fonts.

You should have already installed the font that you want to use and already have the font chosen for your text.

Click OK in the Web Font Settings window which opens with checks in each of the 4 items listed. Then click OK again at bottom of next window. When you do a local publish, all the necessary files will be published. Too easy!!

EXCEPT make sure Tahoma is not checked as a web safe font.

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 6:23 pm
by MichaelLloyd
bry,

Thank you for that information, very good to know, and great approach! While following this post I explored all the font options, and understand them much better. Very glad you got a solution for displaying a web safe font on an iOS device (huh???!!!).

This has been educational and informative. Web Builder can do just about everything, just need to figure out how.

btw... Though I am certain Pablo is correct, that there is no facility for font fallback code, I am equally certain there is some place (possibly multiple places) where such code can be placed. Web Builder is very flexible and forgiving with incorporating custom code.

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 8:34 pm
by bry
Pablo is a genius beyond doubt. I think what he means is that the system (as I described above) that he designed is way far and above better than a fall back font system. For instance, I had a particular look in mind for the most recent website I built http://www.senatorligon.com/ and I wanted Tahoma for that design. Therefore, it is so much better to have the iOS devices (iPhones and iPads) to see Tahoma rather than all the other non-serif fonts which are much more closely spaced fonts. But it was particularly irritating to see a serif font on those apple products.

The iOS serif font looked out-dated and didn't match the design at all. So by forcing the Tahoma font on them, it makes the website even better in that the discerning eye would notice the sans-serif very open font that Tahoma is. Very cool!!!

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 8:56 pm
by Pablo
The problem with fallback fonts is that it changes the size of the text and therefor impacts the layout. Causing overlaps with other elements or empty spaces depending on whether the fallback font is smaller or larger.

Re: Best font - no serifs - for use with mobile devices

Posted: Wed Sep 12, 2018 10:55 pm
by bry
Yes, fall backs would force the choice of a wrong size font.

I noticed that the font the iOS devices chose - although ugly to my eye - fit the text blocks exactly. There was no overlap or spacing problems. Now that you point out the fall back problem, i think that the iOS devices chose a font size that most closely matched the very open Tahoma in size. It seems reasonable that the large serif font matched the open Tahoma font in size.

At the time i was thinking how strange that a serif font was chosen. Pablo, I think your reasoning answers that question i had in my mind.