Web Safe Fonts vs Web Fonts

Last updated:

Web safe fonts are typefaces that are widely available across various devices and operating systems, whereas web fonts are custom ones that can be loaded from external sources. The former are more suitable for formal content, such as email campaigns and funnel pages, whereas the latter offer you more creative freedom but are not pre-installed on devices by default. Instead, they are loaded from the internet when a webpage or email is accessed.

In the email and page designer, Prisma Campaigns’ text editor allows you to choose from the following list of web safe fonts: Arial, Courier, Georgia, Helvetica, Tahoma, Times New Roman, and Verdana.

Characteristics of Web Safe Fonts and Web Fonts

To determine when to use web safe fonts or web fonts, consider the following characteristics:

Web safe fonts (Arial, Courier, Georgia, Helvetica, Tahoma, Times New Roman, Verdana, and more):

  • are installed on most devices and operating systems
  • ensure consistent display across different email clients
  • reduce the risk of formatting issues
  • load quickly, enhancing the overall email experience for recipients
  • may lack the creativity and uniqueness desired for branding purposes
  • do not stand out as much compared to designs using custom web fonts

Web safe fonts

Web fonts (Google Fonts, Adobe Fonts, etc.):

  • offer access to a wide range of modern and stylish typefaces
  • enable designers to create visually striking emails
  • not compatible with webmail clients (Gmail, Yahoo! Mail, Outlook.com) and the Outlook 2007-2016 desktop app
  • best supported by the Apple ecosystem (iOS Mail, Apple Mail)
  • lead to inconsistent rendering and potential fallback to default fonts
  • can increase email loading times, impacting the user experience
  • require licensing for commercial use, adding complexity and potential costs to email marketing campaigns
  • may not be accessible to users with slow Internet connections

Web fonts

Adding Web Fonts to Your Emails and Pages

To use web fonts in your emails and pages, you need to:

  1. Choose a web font provider (Google Fonts, Adobe Fonts, etc.).

  2. Select the desired font(s) and generate the embed code. Take Quicksand from Google Fonts as an example:

    Getting the Quicksand font

  3. Copy the embed code:

    Embedding the Quicksand font 

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">

    * {
  font-family: "Quicksand", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

  4. Add the embed code to the <head> section of your email or landing page*:

    Adding the Quicksand font to the head section

    *Note: To render the web font, add the code in the landing page that is used in the campaign. This will ensure that the font is applied correctly in all pages and funnel messages.

  5. Test the email or page across different devices and email clients to ensure proper rendering.

Testing the Quicksand font