{"id":139669,"date":"2022-01-25T11:00:00","date_gmt":"2022-01-25T11:00:00","guid":{"rendered":"https:\/\/getflywheel.com\/?p=15028"},"modified":"2024-01-02T02:14:09","modified_gmt":"2024-01-02T08:14:09","slug":"everything-you-need-to-know-about-web-fonts","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/everything-you-need-to-know-about-web-fonts\/","title":{"rendered":"Everything you Need to Know About Web Fonts"},"content":{"rendered":"\n

Editor\u2019s note: This guest post was written by Abbey Fitzgerald<\/a> a UX software engineer and web designer who loves the art of crafting code.<\/em><\/p>\n\n\n\n

Typography is a fundamental element in any web design work that you do. The reason we are hired to design websites for our clients is so they can provide an experience that provides helpful content for their users. Having a solid typographic base will help display content in a way that users can consume effectively. While there may be many other design elements on a website, content is the main consideration, and as designers, it is our job to enhance projects with our selection and use of typography.<\/p>\n\n\n\n

Typography Basics<\/h2>\n\n\n\n

Font vs. Typeface<\/h3>\n\n\n\n

Before we get too far into the typography discussion, let\u2019s go over the terms \u201cfont\u201d and \u201ctypeface.\u201d A typeface refers to the set of typographical symbols and characters: letters, numbers, and any characters that let us put words on our website. It is the design of the alphabet, basically the shape of the letters that make up that style. When we refer to Helvetica, we are referring to a typeface.<\/p>\n\n\n\n

\"a<\/figure>\n\n\n\n

A font is defined as the complete character set within the typeface, often referring to a particular size and style. Helvetica Bold 10 point is a way to reference a font. Fonts are specific to the files that contain all the characters and glyphs within the typeface.<\/p>\n\n\n\n

This great debate, \u201cfont vs. typeface,\u201d makes for wonderful conversation with fellow designers. For all you type sticklers out there, we\u2019re really talking about typefaces, but \u201cweb fonts\u201d is most used in conversation.<\/p>\n\n\n\n

Font Classification<\/h3>\n\n\n\n

As you come across the many available typefaces in the world, you will need to be familiar with how they are classified. The most common way is to have them classified by technical style: serif, sans-serif, script, display, etc. Typefaces are also classified by other specifics such as proportional or monospaced. Depending on the source, they may get very specific.<\/p>\n\n\n\n

\"Example
Serif typefaces have a small line attached to the end of a stroke in a letters and symbols.<\/figcaption><\/figure>\n\n\n\n
\"Example
Sans-serif typefaces do not have serifs. \u201cSans\u201d comes from the French word meaning \u201cwithout.\u201d<\/figcaption><\/figure>\n\n\n\n
\"Example
Script typefaces have a handwritten feel to them because of the fluid stroke.<\/figcaption><\/figure>\n\n\n\n
\"Example
Display typefaces are meant to be shown in headings and other prominent areas so they stand out. They do not work well in paragraphs and should be used in situations where they appear in a large block.<\/figcaption><\/figure>\n\n\n\n

History of Web-Safe Typography<\/h2>\n\n\n\n

In the early days of the web, we were stuck with web safe options, which were very limiting. For a user to see the font that was intended by the designer, it was necessary that they had that available on their computer. <\/p>\n\n\n\n

If you open up a stylesheet from an older site you will likely find Arial, Georgia, Times New Roman, Trebuchet MS, and\/or Verdana. Those were the fonts that were most likely on a user’s machine, so they were considered to be \u201cweb-safe\u201d since the majority of users could view the website as intended.<\/p>\n\n\n\n

If you\u2019ve been designing websites for a while, or are a long time web surfer, you probably remember the days of limited typography options. It wasn\u2019t that long ago that we saw the same five typefaces over and over as we surfed the web. <\/p>\n\n\n\n

Things began to look boring with no other web safe options, and one could argue that these typefaces weren\u2019t the best fit for the web (after all, they did originate from print). But as the web evolved, more type options became available.<\/p>\n\n\n\n

What are Web Fonts?<\/h2>\n\n\n\n

Because typography is so important, it is time to celebrate that huge strides have been made. We have so many typefaces at our disposal that we can now choose what is best for our users, rather than having to rely on the same old web-safe fonts that we were once limited to.<\/p>\n\n\n\n

Web fonts are not pre-installed on the user’s system like web-safe fonts are. We do not have to rely on the user having the desired font on their machine. They come from an included source so every user will be able to see the defined font. These fonts are downloaded by the browser while rendering the web page, and then applied to the text.<\/p>\n\n\n\n

How to Use Web Fonts<\/h2>\n\n\n\n

The @font-face rule<\/h3>\n\n\n\n

This widely supported rule allows us to download fonts from a server, or host them, so we can use them on our web pages. By declaring the @font-face<\/code> rule in our stylesheet, we can specify the name of the typeface, the location, and the font weight.<\/p>\n\n\n\n

This example shows how we add Open Sans Regular. You will see the source is a fonts folder that is included in the website project.<\/p>\n\n\n\n

[css]\n\n@font-face {\nfont-family: 'Open Sans Regular';\nsrc: url(&amp;amp;quot;..\/fonts\/OpenSans-Regular-webfont.eot&amp;amp;quot;);\nfont-weight: normal;\nfont-style: normal;\n}\n\n[\/css]<\/pre>\n\n\n\n
The declaration above adds the font so it can be used. How do we actually get it to display?<\/p>\n\n\n\n
[css]\n\n.example{\nfont-family: &amp;amp;quot;Open Sans Regular&amp;amp;quot;, Arial, sans-serif;\n\n}\n\n[\/css]<\/pre>\n\n\n\n
You can see that the name of the font is set to \u201cOpen Sans Regular.\u201d This is the font name that would then be referenced in our CSS font stack, along with fallback fonts just in case the font doesn\u2019t load for some reason. In most cases, the font will load just fine, but it\u2019s a good idea to include fallbacks, just in case.<\/p>\n\n\n\n
\"font-declaration\"<\/figure>\n\n\n\n
Keep in mind that most fonts have other families, some have more than others. To utilize those, make sure you include each one with the @font-face<\/code> rule.<\/p>\n\n\n\n
Formats and Web Fonts<\/h2>\n\n\n\n
Let\u2019s dive a little deeper into web fonts, when there are multiple formats that you will need. These fonts are self-hosted, and are stored on the server in a folder called “fonts.” You\u2019ll notice that there are a few new lines added from the last example.<\/p>\n\n\n\n
[css]\n\n@font-face {\nfont-family: 'Open Sans Regular';\nsrc: url(&amp;amp;quot;..\/fonts\/OpenSans-Regular-webfont.eot&amp;amp;quot;);\nsrc: url(&amp;amp;quot;..\/fonts\/OpenSans-Regular-webfont.eot?#iefix&amp;amp;quot;) format(&amp;amp;quot;embedded-opentype&amp;amp;quot;),\nurl(&amp;amp;quot;..\/fonts\/OpenSans-Regular-webfont.woff&amp;amp;quot;) format(&amp;amp;quot;woff&amp;amp;quot;),\nurl(&amp;amp;quot;..\/fonts\/OpenSans-Regular-webfont.ttf&amp;amp;quot;) format(&amp;amp;quot;truetype&amp;amp;quot;), url(&amp;amp;quot;..\/fonts\/OpenSans-Regular-webfont.svg#open_sansregular&amp;amp;quot;) format(&amp;amp;quot;svg&amp;amp;quot;);\nfont-weight: normal;\nfont-style: normal;\n}\n\n[\/css]<\/pre>\n\n\n\n
There is a reason why we have to include different formats like: .eot, .woff, .ttf, .truetype, and SVG. Different browsers support different font formats, so we need to cover our bases and provide everything that various browsers may need.<\/p>\n\n\n\n
Here’s a list of browsers and what font file types they support:<\/p>\n\n\n\n