New Features: Web Fonts & Social Media Buttons

hourglass_empty
  • In Settings, click Apps, click Apps & features, and then click Manage optional features. If you don't see Hebrew Supplemental Fonts in the list of installed features, click the plus sign (+) to add a feature. Select Hebrew Supplemental Fonts in the list, and then click Install. Note: The optional features are installed by Windows Update.
  • Features A bit of art, a smidge of science. Beautiful typography. Choose from a variety of free professionally designed fonts and for every occasion. Select from thousands of photos on the web or pick from your personal collections on Adobe Creative Cloud, Lightroom CC, Dropbox or Google Photos. Professional themes.
  • Arial (sans-serif) Arial is the most widely used font for both online and printed media. Arial is also the default font in Google Docs. Arial is one of the safest web fonts, and it is available on all major operating systems.
  • In lettering and typography, sans-serif fonts, sans serif, gothic, or simply sans letterform is one that does not have to extend features called “serifs” toward the end of strokes. Sans-serif fonts have a tendency to have less line width variation than serif fonts. In most print, they are regularly used for headings rather than for body text.

Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.

6min Read

In this article, we’ll show you 20 best HTML fonts that you can install on your website. By using one of them, you will greatly improve your web design and content readability.

Why Should You Pay Attention to HTML Fonts?

Whether you’re aware or not, an HTML font plays a vital role on your website. If chosen correctly, it can improve the overall aesthetic of your page and allows visitors to read the content easier.

But if you carelessly pick a random and inappropriate font, it might have a negative impact on how your site looks and the content’s readability.

What is more, a font can also affect your website’s performance, both positively or negatively. It depends on whether you’re using a web-safe font or not. We’ll discuss that in more depth later, so keep on reading.

How to Change the Font via HTML Code?

To change the font via HTML, you can use the style attribute within the <p> tag that defines a paragraph. Here’s an example:

There are three font types in this example — Courier, Arial, and Helvetica. The second and third fonts are backups in case the first one can’t be found or is not installed properly.

Limited time deal. Use the best HTML fonts with affordable hosting for your website.

What is a “Web Safe Font”?

Simply put, this term is used to describe a font that is universally installed across all devices. Since they are stored locally, your website should load faster when you use a web-safe font.

This will ultimately affect SEO as page loading speed is one of the factors taken into account when ranking pages on the SERP.

That’s why we recommend using a web-safe font – to make sure your readers can view content easily and your website’s performance is not negatively impacted.

Keep in mind that there are alternatives to website safe fonts, which usually share the same characteristics as popular typefaces. For example, the alternatives for the Sans Serif font like Helvetica are Acumin and Univers.

But unlike their web-safe counterparts, alternative fonts are often not prepackaged on all OS. That being said, you may want to use one of them because it may seem that a popular font is overused. Just remember that you might sacrifice the speed of your website in exchange.

What are the Five Font Families?

In typography, each font is a member of one of the five font families categorized based on their design similarities. They are:

Cursive (e.g., Zapf-Chancery)

The fonts in the Cursive family imitate human handwriting and the letters are usually joined together in a flowing manner. Many people associate Cursive fonts with faster writing and calligraphy.

Fantasy (e.g., Star Wars)

The Fantasy font family generally has decorative elements in each letter but still represents the characters. Many fictional books or films use typefaces from this font set for their titles to strengthen the nuance of the content.

Serif (e.g., Times New Roman)

The most notable feature of this font family is a small line at the end of a big stroke in a letter or symbol. They create a sense of formality and elegance. Various websites mainly use Serif for body text.

Sans-serif (e.g., Helvetica)

Unlike serif, Sans-serif doesn’t have the small line attached to every letter. Also, most fonts from this family usually have a similar stroke width, making it modern and minimalistic.

Monospace (e.g., Courier)

Each letter and symbol of Monospace fonts occupy the exact same space horizontally. Since the fonts are consistent and easy to distinguish, they are often used with typewriters and computer terminals.

What Font Should I Use for My Website?

We highly suggest that you use a web-safe font because it is compatible across various devices by default.

What’s also important, you need to choose a font that fits your website’s style and writing tone. It will make you look more professional and improves the user’s reading experience.

Online

The great news is, you can easily find the most suitable font for your website in our recommendations below!

Best Web Safe Fonts

All fonts on our list are web-safe, so you don’t have to worry about compatibility or performance issues. Now, let’s check out the 20 best HTML web fonts:

1. Arial

Arial is one of the most famous fonts for both online and printed media. What’s more, it is the default font in Google Docs, a popular online office suite. Many critics say that this sans-serif member is a safe bet for anyone.

2. Times New Roman

Times New Roman is a variation of the old Times font from the Serif group. Deck building 101 session 3highlander: the card game. With its professional look, it has become the favorite choice for printed media and more formal content. In addition, this typeface is favored by news websites and similar institutions.

3. Helvetica

Designers love Helvetica because it’s neutral and suitable for any type of business. That’s why many renowned brands, such as Jeep, Kawasaki, Motorola, and BMW, picked this font up. We’re sure people can’t go wrong when choosing Helvetica, regardless of the purposes.

4. Times

Originally, Times was used when printing most newspapers, and it has been associated with journalism and academic writing ever since. Therefore, if you want to add a traditional or formal feeling to your website, this font is a perfect choice.

5. Courier New

This font is an alternative to Courier, that is thinner and more visually appealing on screen. For that reason, electronic devices primarily feature Courier New. But since it’s also a typewriter font, it should look great on websites that need an old-school design.

6. Verdana

This typeface is easily readable even when using small font sizes, or when displayed on low-resolution screens. This makes Verdana an excellent screen font. However, a big company like IKEA uses Verdana not only for its site but also their printed catalogs. If you’re looking for an HTML font with great readability, you should try this typeface.

7. Courier

Social

You can say that Courier is the most famous font in the monospace family – all operating systems come prepackaged with it. This HTML font has been a standard for movie screenplays, as well. Therefore, if your website is all about that subject, definitely consider adding Courier to your site.

8. Arial Narrow

It is one of Arial’s versions that offers a sleeker design than the original. Users can still find this alternative font preinstalled in a variety of OS. Much like its predecessor, Arial Narrow is versatile and fits any type of webpage.

9. Candara

Microsoft Vista is the first OS that brought Candara to the mainstream. It supports the Windows ClearType text rendering system, which should improve text readability on LCD displays.

10. Geneva

Geneva belongs to the Sans-serif group and was originally developed by Apple. Similar to any typeface in this font family, Geneva offers a clear and modern look for your website or blog.

11. Calibri

It is the default font for Microsoft Office. With Microsoft Windows still being on top of the desktop OS market share trends, people should have no problem reading this HTML font on their browsers.

12. Optima

Optima finds its inspiration from classical Roman Capital letters. It is used in many different places – from road signs to beauty product logos. This HTML font is elegant and highly visible, which is necessary for making your content pop.

13. Cambria

Calibri, Candara and Cambria all belong to the ClearType font style that Microsoft makes. With very even proportions, Cambria was designed for a great on-screen reading experience, even when it’s displayed in small sizes.

14. Garamond

Garamond is a classical font type for many printed books. Print designers consider it as one of the best options, thanks to its timeless look and good readability. We’re convinced Garamond is suitable for adding an antique nuance to a website or blog.

15. Perpetua

The font came from the idea of an English sculptor who was influenced by monuments and memorial lettering. The formal characteristics encouraged Penguin Classics and the University of Pennsylvania to feature Perpetua in their publications. All in all, an educational or informational page can definitely benefit from this HTML font.

New features: web fonts & social media buttons free

16. Monaco

MacOS X ships with Monaco, a monospace family member, for the Terminal and Xcode. It features a distinctive design, which helps us tell similar-looking letters apart. Try Monaco on your website if you often write code and don’t want readers to be confused by even a single letter.

17. Didot

Didot is a serif font that has been described as neoclassical by many critics – that means it carries a classic design but adds a modern twist to it. It’s used by CBS News and The Late Show with Stephen Colbert. This typeface is known for its high contrast and increased stress, helping it stand out.

18. Brush Script MT

This font features a calligraphy style based on handwriting techniques. This way, Brush Script MT translates into a beautiful yet readable HTML font for your site. Though Brush Script MT is elegant and sophisticated, it might be best suited for editor’s notes and similar uses.

19. Lucida Bright

Lucida Bright is one of the Lucida font versions with more contrast. The narrow typeface allows for the effective use of space and can be great for manuals or magazines. A famous user of this typeface is Scientific American Magazine.

20. Copperplate

Copperplate’s designers wanted the font to be used only for headers or titles, so it only includes capital letters. The typeface became famous after “Who Wants To Be A Millionaire” made the font its trademark.

Dishonorable Mention (Comic Sans)

Internet users share one common ground: They hate the Comic Sans font. People consider this typeface childish, unprofessional, unattractive, and silly.

It has become somewhat of a meme over the years. Therefore we don’t recommend using it. While it is a web-safe font, there are still many options that will make your site look far better than Comic Sans.

Conclusion

We have shown you the 20 best HTML fonts that you can use for your website. Now that you know their characteristics and usage, it’s time to decide which is the most suitable option for the style and tone of your website.

Good luck and remember – Comic Sans might not be a great idea.

AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.

Thierry Blancpain is a brand and interaction designer at Informal Inquiry in New York City and co-founder of Grilli Type, a Swiss type foundry. While this article is generally applicable to all web fonts, Grilli Type fonts are used throughout as examples of the concepts, particularly those demonstrating OpenType features.

Using your own fonts instead of system fonts is getting easier, but it’s still an evolving field. We’ll go over the different types of font formats and cover tips and best practices for them in this post. We’ll also dive into more in-depth features for those of you who want to level up and aim to perfect the craft with advanced concepts and considerations when using web fonts. In the end, you’ll hopefully feel equipped not only to put web fonts to use but to get the most out of them.

Here we go!

Font Formats

When you purchase web fonts licensing, you receive a package of font files that typically include at least some of the following formats:

  • Embedded OpenType (EOT):EOT is a legacy format developed by Microsoft. Older Internet Explorer versions require EOT to render your web fonts. EOT is often served uncompressed so, if you don’t require browser support of the likes of IE8 or below, then you’re better off leaving it out.
  • TrueType (TTF):TTF is a font format developed by Microsoft and Apple in the 1980s. Modern TTF files are also called TrueType OpenType fonts. TTF can be useful for extending support to some older browsers, especially on mobile, if you need it.
  • Web Open Font Format (WOFF):WOFF was developed in 2009 as a wrapper format for TrueType and OpenType fonts. It compresses the files and is supported by all modern browsers.
  • Web Open Font Format 2 (WOFF2):WOFF2 is an update to the original WOFF format. Developed by Google, this is considered the best format of the bunch because it offers smaller file sizes and better performance for modern browsers that support it.

If you are mostly targeting users with modern browsers, you can get away with a progressive method of using @font-face that only serves WOFF and WOFF2 formats. These offer the best compression and allow you to deal with fewer files in your code. And if a user’s machine is so old that it doesn’t support either of these formats, it may be better to just serve them a system font for performance reasons, anyway.

If you want to expand support as wide as possible, then add EOT and TTF files to the mix. SVG fonts have also been traditionally used for expanding browser support but, at Grilli Type, we don’t offer SVG fonts anymore as they bring with them a number of downsides. Google Chrome for example has even completely removed support for the format.

Embedding Web Fonts

We make use of @font-face to include fonts in CSS.

New Features: Web Fonts & Social Media Buttons Templates

Here’s the deepest level of support, including all of the font file formats we’ve discussed so far:

We can trim things down quite a bit if we’re only aiming to support modern browsers:

Once the font has been declared and defined, we can put it to use on our elements. For example:

Hosting Web Fonts

One of the most flexible ways to load web fonts is to self-host them. That means that you host the files on your own server and your fonts will always be available when a visitor comes to your website without a third-party dependency. Neither tracking codes nor JavaScript is generally required to load self-hosted font files. Many small type foundries offer fonts as a direct download so they can be self-hosted and at Grilli Type, we are convinced it’s the best way to serve fonts.

While some type foundries offer self-hosting (both with and without cumbersome restrictions and requirements), others only offer hosted solutions, meaning they host the files on your behalf. Some of the well-known ones include Hoefler & Co., Font Bureau, and Typotheque. Font Bureau and Typotheque offer their fonts in both ways at different price points.

Make sure you know how a type foundry’s web fonts are offered before you buy licensing, because the difference in hosting and the terms of use can affect how they are implemented. Get what makes the most sense for you and fits your needs, and make sure you’re using them legally and according to the foundry’s licensing agreement.

Advanced Typographic Features

Let’s take a look at some of the more advanced features of web fonts.

Spacing and Kerning

There are two settings inside font files that define the space between characters:

  1. letter-spacing: This is defined as side bearings on the left and right side of each character
  2. font-kerning: This refers to specific adjustments between two characters

Spacing cannot be turned off at all, because otherwise the text rendering engine (your browser) wouldn’t know what to do with these letters. Kerning, on the other hand, is turned off by default in browsers and has to be turned on by you in your CSS.

It’s easier to control kerning than you might think! Here’s how to activate it across all browsers that support it:

FontsSocial

If you don’t use a something like Autoprefixer to help manage browser support in CSS, then you’ll want to manually write out the browser vendor prefixes for this setting to extend browser support to older versions:

Advanced OpenType Features

We just discussed how to use the font-feature-settings attribute to control kerning, but it can also be used to control other available OpenType feature in your web fonts. The number of supported features has been growing over time and the CSS-Tricks almanac is a good place to reference what is possible with OpenType.

OpenType features are really exciting because they open up a bunch of possibilities for controlling fonts without having to serve multiple files to get the same effect. At the same time, it’s worth noting that the features an OpenType font file supports is up to the font designer and that not all fonts support the same features.

To illustrate how advanced OpenType features can be chained together, the following code would turn on the numeric characters of an OpenType-enabled font that supports both old-style numerals (onum) and proportional numerals (pnum), plus enable kerning and activate a specific stylistic set included in the font:

The font-feature-settings attribute can be used to activate stylistic alternates, discretionary ligatures, different types of figures available in a font, small caps, and other handy things. Typofonderie has a nice overview of these advanced features, including examples.

Because font-feature-settings is used to set many OpenType features at once, it’s not possible to define a single setting differently as the other choices will not be inherited. All of the features would need to be defined again to change the settings for child elements.

Letting Spacing and Word Spacing

CSS has long supported the letter-spacing and word-spacing attributes. When used correctly, both provide a fair amount of control over two very important aspects of how your type will look.

As with all things typography, you’ll want to learn how to evaluate different options both functionally and visually and make decisions based on your impression. Different contexts may call for different spacing needs.

At smaller sizes, most typefaces will benefit from a little extra spacing between characters and words. In larger contexts, like headings, typefaces may benefit from more narrow spacing. In either case, the right decisions require attention and your best judgment based on the outcomes.

I’ve found that letter-spacing and word-spacing both work best using em units for the values. That allows the spacing to adjust fluidly based on the font size of the element they are applied to. The following example will give your content a little more room to breathe at smaller font sizes:

Font Rendering

Using type on screens brings up important questions about how they are rendered. Fonts are usually designed on about a 1000 units tall grid—or even larger—but then are displayed at something like a 16px font size. In an interplay between device, screen, and software, this reduction in resolution and fidelity requires some smarts to make small type legible and good-looking. Again, be observant, test in many browsers, and use your best judgment to put the best methods to use to increase legibility.

New Features: Web Fonts & Social Media Buttons Download

Hinting

Every operating system treats fonts differently from one another. In MacOS, the smarts are in the operating system (and thus can evolve over time), while the fonts themselves can be dumb. Historically, on Windows, the smarts were supposed to be included in the font software, and the system was supposed to use those smarts to decide how a font should be rendered at different sizes.

Those smarts are called hinting. Hinting information embedded in the font files can tell a computer that the two stems of an “H” character are supposed to have the same line width, or that the space above and below the crossbar should stay about equal at smaller sizes.

Hinting is a very complex and complicated topic, but the important takeaway is that the same font at the same size might render differently, even on the same computer depending on many factors, including the screen, the browser, and even the font and background color.

Microsoft provides a guide on the topic of hinting. Even though it was initially released in 1997, it’s still a good read because it so thoroughly explores the topic.

Font Smoothing

While hinting information included in the font files is mostly being ignored on MacOS, specific browsers offer some additional control over font rendering.

Using these CSS properties leads to sharper, thinner text rendering on MacOS and iOS. But beware: this can also lead to rendering problems, especially if you’re already using a thin font or font weight.

Both antialiased and grayscale are mainly useful to balance the rendering of fonts when using light text on dark backgrounds, as they would otherwise get rendered quite a bit bolder.

The font-smoothing property and its values are not on the path to become a standard CSS feature, so use it with caution and perhaps only in contexts where you know you need to target a specific browser and context.

Caution: OptimizeLegibility

We often come across this attribute when troubleshooting font usage on Grilli Type customer websites:

Among other things, it activates kerning. That was very useful at some point, but is not needed anymore (as shown above). In addition to kerning, it also activates all kinds of ligatures, including extravagant ones that may be present in the font files.

Although there are some use cases for this, do not use this feature if you don’t know exactly what you’re doing with it. Chance are you don’t need it in the first place.

Web Font Resources

If you’re ready to dive deeper into web fonts, here are a handful of recommended resources you can use to learn more:

  • Clagnut’s OpenType CSS Sandbox by Richard Rutter: A great place to test out OpenType features and easily put together your required CSS code.
  • Webfont Handbook by Bram Stein: This is the most in-depth e-book you can possibly read on web fonts, font rendering, and font performance.
  • Copy Paste Character: This is a great website that allows you to access pretty much any special character you might ever use.
  • Using @font-face by CSS-Tricks: This article includes snippets for declaring web fonts based on varying browser support.

Advanced Web Font Considerations

For those who are ready to level up to more advanced techniques, here are even more considerations to take into account:

Uploading Licensed Fonts to Github

If you commit a project to a public repo and use font files that you have licensed, please make sure that either the fonts or the directory that contains them is included in your .gitignore file so that they do not get uploaded. This will prevent others from taking and using your font files, and it can prevent you from breaking any terms of use for licensed fonts that usually have usage and sharing restrictions.

Font Loading Tactics

Loading web fonts can be as easy as simply using @font-face but that doesn’t necessarily offer the best possible performance. For example, it opens up the possibility of a Flash Of Unstyled Text (FOUT) which might be considered poor UX in some cases. Zach Leatherman’s “A Comprehensive Guide to Font Loading Strategies” covers that and methods to improve the loading experience that will make you and your users very happy.

Base64-Encoded Font Files

In some rare instances, encoding your fonts as base64 inside your CSS will be a good idea but, generally, it is not—and, not to mention, you might break your font’s licensing agreement in the process. Be sure to proceed with a lot of caution and read up on your font’s terms of use when considering base64.

CSS Text Decoration

The W3C is working on a draft for new controls for text decoration, mainly dealing with how to make underlining text better and easier in CSS. This is not yet usable across all browsers, but have a look!

Variable Fonts

In 2017, the OpenType fonts specification 1.8.2 was released, allowing for what is called Variable Fonts. This new version of OpenType will allow for the inclusion of multiple font styles into a single font file, reducing server requests and web font file sizes. Depending on the type designer’s choices, it may also allow for the use of arbitrary weights in between existing weights and widths of fonts, among other things. Axis Praxis is a good website to play around with some existing test fonts – you will need a recent version of Safari or Chrome to do so, though.

Wrapping Up

New Features: Web Fonts & Social Media Buttons Free

We covered a lot in this article! Hopefully, now you have a good understanding of the different font files out there, how to work with them, and all the amazing and powerful ways fonts can be styled using both tried and true methods and cutting-edge features.