For this example, we'll use two web fonts: one for the headings and one for the body text. To start with, we need to find the font files that contain the fonts. Fonts are created by font foundries and are stored in different file formats.
There are generally three types of sites where you can obtain fonts:. Let's find some fonts! Go to Font Squirrel and choose two fonts: a nice interesting font for the headings maybe a nice display or slab serif font , and a slightly less flashy and more readable font for the paragraphs.
When you've found a font, press the download button and save the file inside the same directory as the HTML and CSS files you saved earlier. Unzip the two font packages Web fonts are usually distributed in ZIP files containing the font file s and licensing information. You may find multiple font files in the package — some fonts are distributed as a family with different variants available, for example thin, medium, bold, italic, thin italic, etc.
For this example, we just want you to concern yourself with a single font file for each choice. Note: In Font Squirrel, under the "Find fonts" section in the right-hand column, you can click on the different tags and classifications to filter the displayed choices. Now you'll need to generate the required code and font formats. For each font, follow these steps:. After the generator has finished processing, you should get a ZIP file to download. Web services for font generation typically limit file sizes.
In such a case, consider using tools such as:. At this point, unzip the webfont kit you just generated. Inside the unzipped directory you'll see some useful items:. You should end up with a demo page with some nice fonts implemented on them. Because different fonts are created at different sizes, you may have to adjust the size, spacing, etc.
Note: If you have any problems getting this to work, feel free to compare your version to our finished files — see web-font-finished. You can also download the code from GitHub or run the finished example live. Online font services generally store and serve fonts for you so you don't have to worry about writing the font-face code. Instead, you generally just need to insert a simple line or two of code into your site to make everything work. Examples include Adobe Fonts and Cloud. Most of these services are subscription-based, with the notable exception of Google Fonts , a useful free service, especially for rapid testing work and writing demos.
Most of these services are easy to use, so we won't cover them in great detail. Let's have a quick look at Google fonts so you can get the idea. Again, use copies of web-font-start. Note: You can find a completed version at google-font. Let's explore that font-face syntax generated for you by fontsquirrel.
Over the years, due to poor user experiences caused by slow load times, or sometimes not loading at all , font loading strategies were developed to address symptoms, like Flash of Unstyled Text , and its various incarnations. Before fonts have loaded on the left.
After fonts have loaded on the right. As the speed of internet connections improved, less focus was placed upon optimising the amount of information transferred, and whilst that was shortsighted, it simply reflected the attitude of the time.
When we now take into account that more and more devices are accessing the internet over a mobile connection, the importance of addressing the causes of issues, rather than masking the symptoms, becomes evident. Custom web fonts are an essential part of most web design, but they come at a performance cost. This post looks at several methods for addressing both the causes and the symptoms.
In the age of subscription services, it would be remiss of me to not talk about font hosting services. Embedded fonts from services are normally implemented with a JavaScript or CSS snippet that you place in your website code. These snippets then make requests to a third party, often for the font file. In this case, there is an extra connection required to be made to the third party that is not required when hosting the font file yourself.
But this is the best case scenario when using font hosting services. In most cases, when using a JavaScript snippet, the snippet will make several connections, often to verify that you have a valid licence to use the font.
Eventually, the font file will be loaded, but not without introducing quite a lengthy delay to the font actually being loaded onto the site, ultimately resulting in a flash of unstyled text. In addition to these performance issues, most font hosting services limit your ability to make manual optimisations, and as we shall see, there is huge potential to make your fonts more performant if you have full control.
We believe that consistency and readability are vital to good design, and too many font changes can distract and ultimately confuse the reader. Make your choices carefully and consider how the typefaces you choose will be seen together. Traditionally, long publications such as magazines and books can often support a greater variety of typefaces. Digital platforms however are best used with fewer typefaces.
Be smart in choosing fonts that define you, your character and the impression you want to give to the user. Custom fonts, as we know can easily add bloat to websites, so be smart in deciding only one or two weights. At Wholegrain, we love to use a beautiful, well crafted, easy to read font for the body, such as Inter UI or Karla ; with title fonts we often allow ourselves to be more provocative and less restrained.
Arguably the easiest change that can be made, that has no downsides, is converting the font to the most modern and efficient format available in browsers, WOFF2. In short, lossless compression. Using the web based tool fontsquirrel , and the basic setting no subsetting of the font , we were able to achieve the following.
The results above were from tests on the Inter UI font, using the bold weight used in our website. Whilst kb might seem a drop in the ocean when compared against the average page size just shy of 2MB, when compared against the full load of our home page of kb fonts, images, etc , the balance shifts.
The size of one incorrect format font file alone is time and a half our whole site! The reduction in size is no magic trick, simply the result of paying attention and taking action. On MacOS, our tool of choice to generate font files is fontplop.
Free, open source, well supported, and does the job to perfection. Web fonts are pulled from a server—either one you host yourself or an external one such as Google or Adobe.
Because of this, the variety of fonts that can be used is much larger, and they can be used on any computer… as long as the browser or email client can pull the font in. So while web fonts give you much more variety and creative freedom, they do come at a cost: limited email client support which I dive into more further down.
So you might wonder, why bother with web fonts at all? As a marketer and designer, you know the pressure to stay on-brand in email with colors, design, and—yes—typography. Web fonts let you show off your brand without relying on images for your text. Locking important copy in images has been a standard practice in email design as a way of staying on brand and being creative. And, having text in your images hurts the subscriber experience if they have images turned off by default.
So why not provide the best experience for the widest audience possible? Find out where your subscribers open your emails and how they engage—with Litmus Email Analytics. Get the insights you need to optimize your emails and beyond. Web fonts were originally designed to be used solely on websites, so their licensing is typically for use only on websites and mobile applications.
All of the web font providers we contacted supported using their fonts in email. If you are looking to use a font, reach out to the company to find out exactly how they license their fonts.
With seemingly endless options, you can find ones to fit your brand. Ornate or decorative fonts, such as display or handwriting fonts, can make it difficult for people with visual impairments or dyslexia to tell the difference between letter shapes.
Sans-serif fonts fonts without extended features or curls in their letters such as Arial, Calibri, Century Gothic, or Helvetica and slab fonts fonts with thicker lines such as Museo Slab and Rockwell are considered more accessible. There are loads of web font services available, but Google Fonts is our favorite. Typekit has become Adobe Fonts as of October There are several other web font services available on a paid basis.
With the web licenses, there may be a choice to host the font yourself or to have the font hosted by the provider. In some web licenses, you pay for a certain amount of page views with each email that loads the font counting as a page view, so make sure you take that into consideration when you are purchasing a license.
Your web font service should have this URL. Find out how in the next step for the font-face embed method.
There are three methods for embedding web fonts in email and a caveat that may limit which method you can use. The three methods to embedding your font are:. This can lead to your web font taking a little longer to appear in your email, while the rest of the email is loaded.
You can make beautiful code that works in Litmus all day long, but if your ESP changes your code, as we know most of them do, then nothing you do will matter. The import method is also a relatively simple method. Online web font services commonly offer five file formats to choose from:. First, you have to find the font you would like to use on Google Font. Then, choose the style you want to use.
A flyout menu will appear on the right. Both of these will have a URL highlighted in the screenshot above. At Litmus, the font-face method is our go-to implementation of importing web fonts into our emails. All credit for this method of importing web fonts goes to email accessibility advocate Paul Airy , as detailed in a past Type: E newsletter.
Each email client has a default font if the font listed in the font-family stack is unavailable. Fallback fonts should be the same type as the web font—use a sans-serif fallback font if your web font is a sans-serif font, and a serif fallback font if your web font is also a serif font. The x-height is the vertical height of the font. Ideally, you should choose a fallback font that has a similar x-height to prevent your email design from falling apart when the fallback font is in use.
Once your web font is imported and your fallbacks chosen, using them in email is as easy as using a web safe font.
0コメント