How To: Web Fonts For Landing Pages And Emails

The choice of the right font is essential to convey the right image of the product as well as the entire company. Web fonts allow web designers to work creatively with typography. This makes emails and landing pages more exciting and relevant for your existing audience and potential new customers.

Written by Hannah Krüger

World Wide Web Fonts: How To Keep Track Of Them All

What Are Web Fonts?

In the world of web fonts, a distinction is made between Web Safe Fonts and Web Fonts.


Web Safe Fonts are conventional fonts that everyone is familiar with. In order for a font to be displayed, it must be installed on the reader's device. This is the case with system fonts such as Arial, New Times Roman, Verdana and Georgia. They are supported by all email clients and devices. By using these standard fonts, you can be sure that your fonts will display the same way on every user.


Web fonts are primarily designed to be displayed on web pages. However, web fonts can also be used for e-mail. Well known web fonts are Open Sans and Roboto. These fonts do not have to be pre-installed on your user's computer in order to be displayed on the devices. The information of the web fonts is obtained from an external server. With the use of web fonts you can give free rein to your creativity. You will find countless services on the Internet that offer a wide variety of web fonts, some of them free of charge. Let yourself be inspired.



Which Email Clients Support Web Fonts?

The most popular email clients allow the use of web fonts. With Gmail there is a small exception: only two web fonts are supported. There are no complications with the rest of the email clients. Among them are:


  • Apple Mail
  • iOS Mail
  • Google Android 
  • Samsung Mail
  • Outlook for Mac 
  • Outlook for App
  • Gmail (Roboto and Open Sans only) 


Where CanI Find Web Fonts?

    Google Fonts

    The most popular web font service is Google Fonts. Here you can find the right font for your business from over 900 font families. The access as well as the download is uncomplicated, free of charge and license-free.


    Adobe Fonts

    Adobe also offers a wide range of exclusive web fonts. Browse through thousands of font style options. With a Creative Cloud subscription, you automatically get access and licences for personal and commercial use.



    How Do I Incorporate Web Fonts Into Newsletters Or Landing Pages?

    You don't need to have any programming experience to use web fonts. It's easy with JUNE: In the Landing Pages or Newsletter Editor, select the Headlines and Text settings under “Styles”. Now enter the name of any font in the “Font Family” text field. This will immediately be displayed in your template.



    Testing Before Publishing

    Selecting the right fonts can be time-consuming. It is all the more important that your selected fonts are also displayed to your customers. Test your newsletters in the JUNE Editor by clicking on “Send Test” in the top column. Here you can send your email to test accounts. In the Landing Pages Editor, click “Test” → “Preview” to see your full landing page in a new tab. Testing before publishing is not only useful to make sure web fonts display perfectly on your customers and all devices, but also to check that texts don't break as well as remaining designs show without problems.



    Add Fallback Fonts

    Add fallback fonts to ensure a matching font if your selected web fonts are not supported by an email client. Fallback fonts should always be Web Safe fonts. If you do not use fallback fonts, the default fonts of the email clients will be used. This is e.g., Helvetica at Apple Mail, Arial at Gmail and Calibri at Outlook.



    How Many Fonts Do I Need For Emails And Websites Anyway?

    Your font selection depends on the image you want to convey. For a clean design, a single web font is perfectly adequate. To convey an exciting and creative image, use two to three different web fonts.


    The fonts should be designed for all circumstances:


    • Headlines

    • Paragraph 

    • Buttons

    • Forms

    • Quotations

    If only one font is used, it is important to clearly distinguish the sections from each other. By using different font sizes, bold and italic, and different colors, you make the hierarchy between the headline and body recognizable. Also, pay attention to readability, especially with small font sizes.




    Using one font style or multiple web fonts can reinforce your corporate identity in the minds of your customers and users. It also makes your newsletters or landing pages look more interesting, which reduces bounce rates. Keep in mind that a perfect display of fonts is not always 100% guaranteed. Therefore, add fallback fonts and test your designs before publishing.


    How does Dark Mode change my email?