Landing Page Fonts

[Graybeard]

How to Choose a Body Font
This applies to landing pages also your font makes the first impression of your copy writing and can influence your conversions.

How to Choose Fonts That Make (Not Break) Your Infographic - Venngage

 

[T J Tutor]

I've been using Roboto a lot lately. Especially when mailing younger demo's.

 

[Claire Harbour]

Great post Graybeard, thank you for sharing! I'm a huge fan of Montserrat, Lato and Open Sans. I do love my clean San-Serif typefaces It's said that San-Serif makes the best choice for online use since they are more legible on smaller resolutions and devices, due to not having frills on the top or bottom of each letter.

 

[Graybeard]

I noticed that about sans-serif too.
Also, it is a mobile browser standard so you don't need to include a remote fonts > 300K+ file > up to 500ms time added to the page load

 

[Paul43]

I was a fan of serif, until I discovered that they have low readability on the screen.
Looking for readability and professional, I landed on Verdana.
Not original, I know, but in my view you can't go wrong with that classic style.

 

[Graybeard]

FYI: Verdana and Tacoma do not display factory installed on Android and LINUX -- they display as sans
Android is a large segment of the market

How To Use Custom Fonts On Your Website With CSS this is how to force a browser to download your hosted font file and the CSS code to use

 

[Rol John Torralba]

Great article! I'm using free fonts on my websites, given that premium fonts are expensive.

Another great tool for choosing the right fonts for your heading and body is fontpair.co. It pairs up the best fonts from google fonts.

One downside of importing fonts into your website though is the speed, not to mention some problems you may run into (search flash of invisible text).

If you're like me who preferred speed over style and don't care about how your website looks --as long as it's readable-- you may benefit from using the web-safe system font stack for your website.

It basically uses the system font in your machine, so if you're on mac, your website will use the San Francisco font, and Segoe UI if you're in windows. What's great about using the system fonts is that your website no longer loads the fonts from a source, eliminating those mentioned problems, and decrease the loading time on your website.

 

[Graybeard]

One downside of importing fonts into your website though is the speed, not to mention some problems you may run into (search flash of invisible text).

That is definitely true ... System fonts are better for time demanding page loads -- like landing pages.
Loading remote fonts as well as scripts like bootstrap and jquery add additional DNS requests and their respective file download times.
Caching these files can help, using embedded fonts can help also.

 

[connor r jones]

definitely saving this. I usually stick with a few go to fonts (Karla, Roboto, and Railway) and i try to use serif text whenever the font size drops below 18px to help readability.

That is definitely true ... System fonts are better for time demanding page loads -- like landing pages.
Loading remote fonts as well as scripts like bootstrap and jquery add additional DNS requests and their respective file download times.
Caching these files can help, using embedded fonts can help also.

A good way to get around the issue of fonts causing render blocking is to have them load via javascript after page load. In the mean time have a fallback font of sans-serif so you dont have invisible text. Sometimes it can be a bit odd looking during load when the font suddenly changes, but its worth the increase in performance.