Best font - no serifs - for use with mobile devices

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
bry
 
 
Posts: 305
Joined: Fri Jan 11, 2008 8:44 pm

Best font - no serifs - for use with mobile devices

Post by bry » Tue Sep 11, 2018 5:08 pm

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

User avatar
Psycho
 
 
Posts: 63
Joined: Wed Oct 18, 2017 1:24 pm

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

Post by Psycho » Tue Sep 11, 2018 5:50 pm

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
I have enough money to last me the rest of my life - Providing I die by next Tuesday

User avatar
bry
 
 
Posts: 305
Joined: Fri Jan 11, 2008 8:44 pm

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

Post by bry » Tue Sep 11, 2018 6:13 pm

Thanks, i thought Tahoma was web safe. I guess not. I am away today. I will check it when i return.

Thanks

User avatar
bry
 
 
Posts: 305
Joined: Fri Jan 11, 2008 8:44 pm

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

Post by bry » Tue Sep 11, 2018 6:17 pm

I will switch to Verdana when i return.

electrochrisso
 
 
Posts: 61
Joined: Mon Aug 19, 2013 8:39 am
Location: Darling River

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

Post by electrochrisso » Wed Sep 12, 2018 12:48 am

Looks like Tahoma is not listed in the top 15 websafe fonts, Verdana is though.

https://websitesetup.org/web-safe-fonts-html-css/
WYSIWYG THE GREATEST Web Builder EVER

MichaelLloyd
 
 
Posts: 36
Joined: Sat Jul 02, 2016 12:20 am
Location: Anaheim, California

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

Post by MichaelLloyd » Wed Sep 12, 2018 4:38 am

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.

User avatar
bry
 
 
Posts: 305
Joined: Fri Jan 11, 2008 8:44 pm

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

Post by bry » Wed Sep 12, 2018 2:45 pm

Good point! I cannot find where to implement fall back fonts either.

Pablo, BaconFries can you tell us??

thanks

User avatar
Pablo
 
Posts: 16730
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Wed Sep 12, 2018 2:48 pm

There is no option for fallback fonts.
There is no need for this if you use web fonts/@font-face/google fonts.

User avatar
bry
 
 
Posts: 305
Joined: Fri Jan 11, 2008 8:44 pm

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

Post by bry » Wed Sep 12, 2018 3:08 pm

Thanks, i understand and will do.

User avatar
bry
 
 
Posts: 305
Joined: Fri Jan 11, 2008 8:44 pm

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

Post by bry » Wed Sep 12, 2018 3:19 pm

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.

MichaelLloyd
 
 
Posts: 36
Joined: Sat Jul 02, 2016 12:20 am
Location: Anaheim, California

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

Post by MichaelLloyd » Wed Sep 12, 2018 6:23 pm

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.

User avatar
bry
 
 
Posts: 305
Joined: Fri Jan 11, 2008 8:44 pm

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

Post by bry » Wed Sep 12, 2018 8:34 pm

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!!!

User avatar
Pablo
 
Posts: 16730
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Wed Sep 12, 2018 8:56 pm

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.

User avatar
bry
 
 
Posts: 305
Joined: Fri Jan 11, 2008 8:44 pm

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

Post by bry » Wed Sep 12, 2018 10:55 pm

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.

Post Reply