The difference between font files can be very confusing to a beginner designer. In this article, we'll answer all your questions, such as "What is a TrueType font?, "What is an EOT font?", and more. We'll look at font file extensions, OpenType vs. TrueType, and how to choose the right font file.
To start off, we'll talk about the different font format types to learn how fonts are displayed on screens. Depending on the use, digital or printed, font files can vary. A font is a graphic representation of text that can contain information like point size, weight, width, and design. It's essential to know that a font family or a typeface is a collection of fonts. For instance, Arial is a typeface, and Arial Black is a font.
We'll also talk about the difference between OpenType and TrueType fonts, and when and where to use them. Font file extensions can be scary to look at, but after this article, you'll know which font files are best.
This beautiful vintage display font comes in TTF and OTF formats, as well as an optimized web version that can help you have your website load in just a few seconds. The font is suitable for display, labels, logos, and much more. If you need a source for thousands of typefaces in every font file extension, visit Envato Elements' huge font library.
Font Format Types Explained
Computers and other digital devices can display fonts in a couple of different ways. These font format types are essential for designers to know:
- Bitmapped or raster fonts: each character is made out of pixels. While these fonts are faster for computers to display, they are not scalable. This means that a separate font is needed for each size and style.
- Vector fonts or scalable fonts: each character is made out of an outline, and this allows for the font to be scalable. This means that a single font file can be used for any point size. It only needs additional code to render the font to a desired size.
Font File Types
There are many font file types, and many are created for different operating systems and applications.
It's is important to know what OTF and TTF mean to use the right file. Another font file type is PostScript fonts. These were developed by Adobe, but became tedious when different files were needed for PC and Mac.
The TrueType font file format wasn't efficient because a different font file was still needed for printing. Adobe and Microsoft joined forces and created the OpenType format that allowed for more information to be stored. The Web Open Format is efficient in loading websites with its super compressed file. And finally, SVG fonts are the latest font file type in the industry, allowing for transparencies and effects to be stored in the file.
PostScript
PostScript fonts were created by Adobe. There are two different parts to this font file type, one that contains printing information and the other one for display on screen. The advantage of this font file format is high-quality printing. The disadvantage is that there are two different versions for PC and Mac, so there can be issues when multiple designers need to handle a file. When a Mac font is opened on a PC computer, the file doesn't look the same. Over the years, the OpenType format became popular, and PostScript use declined.
What Is a TrueType Font (TTF)?
So what is a TTF? In the 1980s, Apple developed the TrueType font format and later licensed it to Microsoft for free. Only one file was required, but a separate file for font styles is included (normal, italic, bold, etc.) The TrueType file format was used for screen only, and a PostScript file was used for printing.
What Does OpenType Font Mean (OTF)?
Wondering what an OTF font is? The OpenType file format was created jointly by Adobe and Microsoft. It's based on the TrueType format that supports an expanded character set (ligatures, alternate styles, glyphs, etc.)
OpenType vs. TrueType: Which to Choose?
Which is better: TrueType vs. OpenType? What's the difference between OTF and TTF file types? Are TTF fonts a lesser choice? Should you always go with an OTF file? Let's break down some of the basics.
When you're looking at an OTF vs. a TTF font, they might seem pretty similar—that's because they are, in many regards. In fact, the difference between OTF and TTF might be very minimal for casual computer usage. OpenType vs. TrueType typically concerns designers because it's largely about that extra font data.
TrueType vs. OpenType is largely a matter of extra features. You get more content in an OTF vs. a TTF font—things like extra glyphs, alternates, ligatures, and more. So, if you're only word processing, it might not be a huge factor for you. If you're a designer, on the other hand, you might want all those extra features.
What Is a Web Open Format Font (WOFF)?
The Web Open Format file is a web-exclusive, compressed version of the formats above. This means that fonts download more quickly when viewing them on a website. Note that this font cannot be installed on your system. Fonts are usually loaded from the user's device with a limited number of fonts. Alternatively, designers can use a host, like Google Fonts or their own website, to load fonts.
There's a new version of WOFF called WOFF 2.0 that features improved compression. WOFF 2.0 is the best format for the web. These fonts work well on the web but not in graphics software. Learn how to use web fonts and the best font format for web in this easy-to-follow video:
What Is an Embedded OpenType Font?
So what is an EOT font type? Developed by Microsoft, the Embedded OpenType font file format is a web file supported only by Internet Explorer. It's a form of the OpenType font file that is no longer in use because of its security issues.
What Is an SVG Font?
For a few years, the world of font file formats remained unchanged until SVG fonts came into full force. This new version of the OpenType format allows characters to be displayed in multiple colors and transparencies, and some can even be animated.
Font Conversion (OTF to TTF to WOFF and More)
What if you've got a TTF file, and you'd like to go from TTF to WOFF? Or maybe you have a software situation that warrants exploring OTF to TTF. What's the deal with font conversion, and how do you do it?
For example, let's say you're working on a website, and you want to use a stylish WOFF font. You've got some TrueType fonts you'd love to try—but they're not typically a great choice for web use.
This is because, whether you're looking at TTF fonts or an OTF file, the file size will likely be much larger than a WOFF file. When you look at the types of fonts in computer settings, you won't see WOFF—because, again, it can't typically be installed locally. On the other hand, using a TTF file or OTF font for your website would likely break licensing agreements because it would be like freely distributing it.
You might wonder then—can you convert WOFF to TTF or WOFF2 to TTF? Then answer is a little complicated. Is this technically possible? Somewhat, as there are converters you can use to achieve this, but it's not optimal. You may experience serious quality issues, and many font licenses don't allow this kind of conversion, especially in a commercial setting. Instead of trying to convert WOFF to TTF or WOFF2 to TTF, check out the original font download. Then, you can download the original, high-quality font file.
But let's say you're a font designer, and you want to offer your font in many different formats. Here are some options you can consider:
- Many font design software suites will allow you to choose the font file type. Saving directly within your software environment can help prevent quality issues.
- There are also free font converters online. Just keep in mind things like TTF vs. OFT—converting one to the other won't automatically create extra font data.
- When going from TTF to WOFF, many converters will also supply a sample font specimen via an HTML and CSS file, so you can sample your font in use. This is really handy for double-checking to make sure the font conversion looks good.
How to Choose the Best Font File Format for Your Project or Needs
There are many font files that exist today and many that are still in development, so it can get confusing to know when to use each one. With the addition of web browsers and mobile browsers, being informed about what files are best can only help you optimize your projects. Here's a cheat sheet of when to use each font file:
- Choose TTF/OTF: If you want full compatibility across browsers and operative systems. Old-school TTF and the modern TTF and OTF formats can be useful for extending support to older internet browsers, especially mobile browsers.
- Choose WOFF: If you're using a modern browser, WOFF wraps both TTF and OTF into a single compressed file. Lighter for loading!
- Choose WOFF 2.0: The newest version developed by Google. The best format to choose because of its smaller file size and better performance for loading on modern browsers.
- Choose SVG: For graphic work that requires special effects like animation, color depth, and multiple transparencies. Sometimes this format can also be used for the web, but some browsers have removed the format support entirely, like Chrome.
Relevant Font File Format Videos
Now that you know more about font file extensions and we have the font formats explained, here are a few useful videos from the Envato Tuts+ YouTube channel:
How to Install a Font in Windows 10
If you're curious about how to install fonts on Windows, check out this video on How to Install a Font in Windows 10. This video will also show you how to uninstall in case you don't know how to remove fonts.
How to Install a Font on a Mac
This video is a great walkthrough on How to Install a Font on a Mac. You'll also learn how to uninstall and remove a font, disable fonts, and enable fonts for Mac systems using FontBook.
How to Add Fonts to Photoshop (Mac and Windows)
Learn how to use Adobe Fonts to easily install fonts for Adobe Photoshop, as well as some other ways to install fonts for both Windows and Mac.
How to Upload Fonts to Cricut Design Space
If you're a fan of Cricut, this simple and easy tutorial can help you upload fonts to Cricut. Explore new fonts and create new crafts by learning how to properly install fonts.
That's Font Formats Explained!
In this article, we touched on the most popular font file formats to know, how to use them, and when to use them. We answered your questions about what a TrueType font is, the difference between OpenType and TrueType fonts, and which is better: TTF or OTF. We also talked about the best font format for web and in what instances you should use each one.
Make sure to watch the videos to learn how to install the different font format types and learn more about web fonts.
If you're interested in having more font formats explained, be sure to check out these articles:
