If you're new to web fonts, you might be wondering: what are web fonts? Don't worry. Here we'll cover what web fonts are and how to install web fonts. We'll also show you some of the best web fonts from Envato Elements.
Web fonts are fonts especially created for websites. They're usually on a web server. This means web fonts are downloaded by the browser while rendering the web page, and then applied to the text.
Web fonts need to include four types of files: a TrueType file, a WOFF file, an EOT file, and an SVG file.
Each of these files is designed for different browsers. You'll need all four when using web fonts to build a website. This ensures your font will display on all browsers.
What's the Difference Between Regular Fonts and Web Fonts?
The difference between a desktop font and a web font is that you can install the desktop font on your computer and use it in software like Microsoft Word, Photoshop, and Illustrator. On the other hand, web fonts are only used when building websites.
So, if you're wondering "Can web fonts be used for print?", the answer is no. Web font files are designed to be viewed on a screen.
What Are Web Safe Fonts?
Web safe fonts are common fonts that were used on early websites. In the early days of web design, the font options were very limited. Web fonts named "safe" refer to the ones available on the majority of computers. Using a web safe font means the font would display correctly on every browser.
Some examples of web safe fonts are Arial, Helvetica, Georgia, Times New Roman, and Verdana. These fonts were most likely on every user's computer. They're considered web safe fonts since the majority of users could view the website as intended.
How to Install Web Fonts
Web fonts require files that are loaded from one of two places: the visitor’s own computer or a web server.
In the case of web servers, web fonts work with the CSS
@font-face rule. This is a widely supported rule for the CSS stylesheet. It allows you to download the web font from a server and use it on the web page.
By declaring the
@font-face rule in the stylesheet, you can specify the name of the typeface, the location, and the font weight. To learn more about the
@font-face rule, check out this complete tutorial:
You can use any font you want in this manner, because you don't need to worry that a visitor doesn’t have access to the required files.
Web fonts can be served up either via your own site’s hosting or from an external provider like Google web fonts. To serve up your own web fonts, first ensure you have permission to use the files, and then put them on your host and use
@font-face in your CSS to load them up.
This is summed up on our Envato Tuts+ YouTube channel:
5+ Best Web Fonts From Envato Elements for 2021
Now you know what web fonts are and how to install web fonts. Next up, I'll show a selection of the best web fonts from Envato Elements.
A subscription to Envato Elements will give you access to thousands of the best web fonts. If you’re a typeface fan, you need to take a look at our selection.
Some of the most popular web fonts are Helvetica web fonts. We'll see some examples of Helvetica Neue web fonts, which are sans-serif web fonts inspired by the widely used and popular Helvetica typeface.
Gotham web fonts are another popular option. Gotham web fonts are based on geometric sans-serif typefaces and look fantastic on the web.
1. Exensa Grotesk - Sans Serif Typeface & Web Fonts (OTF, TTF, WOFF)
Exensa Grotesk is the perfect Helvetica web font. This sans-serif web font is based on the Swiss style we see in the original Helvetica Neue typeface.
This Helvetica Neue web font will look great in headings and page content. Exensa Grotesk features five weights (Light, Regular, Bold, Extra Bold, and Black). This pack includes all web font formats (EOT, SVG, TTF, WOFF).
2. HAMLIN - Minimal Geometric Typeface + Web Fonts (OTF, TTF, WOFF)
If you love Gotham web fonts, look no further than Hamlin. This Gotham web font is inspired by classic geometric Gotham fonts, but with its own unique and minimal style.
Use this sans-serif web font for clean body text, minimal logos, and any other digital project. Hamlin comes with four weights (Light, Normal, Bold, and Extra Bold). The pack includes all web font formats (EOT, SVG, TTF, WOFF, WOFF2).
3. HERZ - Simple Sans Serif Typeface (OTF, TTF, WOFF)
Herz is another fantastic Helvetica web font. I'm sure you've seen how good this web font looks on digital projects such as logos, branding, headlines, and websites.
Now you can grab this Helvetica Neue web font for yourself. The sans-serif web font comes with three weights: Light, Regular, and Bold. The pack includes all web font formats (EOT, SVG, TTF, WOFF, WOFF2).
4. Selma - A Classy Serif Typeface (OTF, WOFF)
Let's take a look at serif web fonts, some of the best web fonts out there. Selma is a classic serif font with strong, thick serifs.
Use this serif web font to create attractive headings and body text in heavier weight. Selma comes with four weights (Light, Book, Regular, and Bold) and four italics.
5. Calling Loves - Font Duo (OTF, TTF, WOFF)
If you're a web designer, you'll love this web font combo for your websites. Serif web fonts combined with script fonts are a huge trend in design.
Use these script and serif web fonts for your own brand, websites, and graphic design. Calling Love includes accents, ligatures, numerals, and punctuation.
6. Yahya Slab Serif Font Family (OTF, TTF, WOFF)
One last font for the serif web font fans. Yahya is a minimalist slab font that will stand out in your digital projects. This slab font features thick, block-like serifs and looks particularly good in blog headings, web layouts, advertising, and more.
The Yahya serif web font features five weights (Regular, Light, Medium, Round, and Bold) and includes the full web font kit.
Discover More About Web Fonts
The world of web typography is fascinating. If you're craving more about it, we've got this complete learning guide: A-Z of Web Typography. And here's some more awesome content you can check out today:
- Web TypographyWhat Your Web Typography Says About YouJoanna Ngai
- Typography5 Attention-Grabbing Web Fonts to Download and UseEric Karkovack
- Fonts10 Best Web Fonts That Look Great at Small SizesEric Karkovack
- Fonts14 Fonts Similar to HelveticaGrace Fussell
- FontsFonts Similar to Open SansGrace Fussell
- FontsWhat Are Variable Fonts?Grace Fussell
- Web TypographyHow to Use Variable Fonts on the WebAnna Monus
- Web TypographyHow to Use Color Fonts on the WebKezz Bracey
- FontsVariable Fonts on the Web, ExplainedKezz Bracey
- AccessibilityDesigning Accessible Content: Typography, Font Styling, and StructureCarie Fisher
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post