How to Add Open Sans Font in Css

If you're sporting some technical know-how about web fonts, then read on as we go a bit more in-depth on the topic.

How to embed web fonts in email

If you're still reading you must know your web font stuff and you know a thing or two about coding so let's talk about how to embed web fonts in your emails.

It's surprisingly easy to serve up web fonts in your HTML email. There are three approaches, all with slightly different levels of support in different email clients.

@import

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Currently, the @import method is not supported in AOL using IE11 and Android 2.3.

<link>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

The <link> method is fully supported among the email clients listed above. Web font services will provide you with the href value to use for your web font of choice. If you're hosting your own web-font, you'll have to change the href value to where you've hosted your web font.

 @font-face

<style type="text/css">
@media screen {
   @font-face{
       font-family:'Open Sans';
       font-style:normal;
       font-weight:400;
       src:local('Open Sans'), local('OpenSans'), url('https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
   }
}
</style>

Think of the @font-face method as a direct-to-the-source sort of method of importing your web fonts. It can be more reliable to import the web font directly from the source as you can choose which format of web font you want to import. Especially if you're given a choice, which some web font suppliers do have.

In the example above the WOFF font format has been imported, which is considered to be the most widely supported of font formats for email.

Getting a hold of the WOFF version of the font from Google Fonts requires use of either Safari or Internet Explorer.

Find the font you're after and add it to your selection by hitting the little "+" symbol. A black bar will appear at the bottom of the screen – click on it to open it up.

You'll see a URL for the font you've chosen – highlight that and open it up in either Safari or Internet Explorer. Once you do, you'll see the @font-face declaration you'll need to paste into your email.

However, be aware if you use this method in conjunction with Google Fonts, the URL may change in the future, so it'll be something you would need to keep an eye on.

After you've imported your font using any of the above methods all you just have to add it to your font declaration like you would Arial, or Verdana.

<td style="font-family: 'Open Sans', Arial, sans-serif;">Open sans font for all!</td>

Outlook web font bug & the joy of Times New Roman

As with many things email, web fonts come with their own particularly annoying problem. In this case: Outlook 2007/2010/2013. Oh, the joy of Outlook! There's always one, isn't there? Even if you've set your fallback font up correctly, Outlook won't fallback to that font. Outlook will fallback to…Times New Roman. Great! Not so great if your fallback font isn't Times New Roman.

The good news is that there's already a workaround for this issue. Simply embed the following code in your email:
<!--[if mso]>
<style type="text/css">
.fallback-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

And use the class fallback-text wherever you have used your web font family like this:

<td class="fallback-text" style="font-family: 'Open Sans', Arial, sans-serif;">Open sans font for all!</td>

What's happening here is the CSS class is being used to target the text and serve Outlook an alternate font stack to use. You can substitute Arial for any other web safe font you would like to use.

Choosing good fallbacks

A fallback font is the font that is shown to the subscriber of the email if their email client doesn't support web fonts. You need to give choosing the right fallback font some thought. Keep in mind that the fallback font needs to be a web safe font, so you're limited in your choice.

The vertical design of your email is incredibly important, and you don't want it to fall apart when your second or third font choice is displayed. So you need to consider is the x-height of your web font that you've chosen and choose a web-safe font that has a similar x-height.

The animated GIF shows three different fonts which fit incredibly well together, in terms of their x-height. While Verdana does have an overall greater size, the x-height is similar to the other fonts. So vertical spacing of your email will be fine.

Another thing to consider when choosing the right fallback font is the feel of the font. If your web font is a serif font (like Times New Roman), you need to make sure you choose an appropriate serif font as a fallback. And the same if you've chosen a sans-serif font (like Arial). This ensures that the overall look and feel of your email doesn't change if the web font is used or fallback font. You need to keep the design of your email consistent from client to client.

Where to get web fonts

One of the most popular and easy to use sources of web fonts is Google Fonts (https://fonts.google.com). While you won't find some of the more popular fonts here, you will find great alternatives. Which are available for free. Yes, you won't have to pay to use any of the Google web fonts in your emails. You can also download any of the fonts on Google Fonts to your computer so you can use them when you design your email in Adobe Photoshop or Sketch.

Other paid for services are also available. Below is a list of web font services which house web fonts licensed for use in email. (More on licenses below.)

MyFonts
Commercial
FontSpring
Typotheque
Process Type Foundry
Production Type
YouWorkForThem
Village
FontShop

Licensing

A license is required to legally use a web font online. As web fonts have been used on websites for a few years, licensing is already in place that covers use on websites and even mobile apps. However, licensing for use in email isn't quite as widespread. This is because the use of web fonts in email is often seen as redistributing the font. And for many web font services, this goes against their EULA (End User License Agreement).

Most licenses for use of web fonts in email are based on the number of monthly opens. Something to consider if you're using a paid for web font in your emails.

Always test your web fonts

Different email clients will render a web font very differently from one another. Careful selection of a font should be considered, as some typefaces that are not as well designed as they should be can render poorly in certain email clients. Testing your emails is a good way to avoid that and might influence the selection of one font over another.

If you test your fonts and find they don't work, you luckily have options. You might consider changing to a web safe font or design an image with the specialized font you want to use.

In other words, testing can help you get creative so your users still have a great experience.

How to Add Open Sans Font in Css

Source: https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/

Share this post