In this web fonts guide we cover questions such as the difference between font file types, font licenses and whether web fonts slow your site down.
A Short History Of Web Fonts
Fonts are different styles of representing text.
As well as the typeface, like Times New Roman, a font embeds variable factors including point size and weight.
When the web was a wild and unexplored frontier there were only a few fonts to choose from.
Computer operating systems came with a small range of fonts pre-installed. This meant that visitors to early websites enjoyed high compatibility with websites and their pre-installed desktop fonts.
A major drawback being that design options for text content on websites was limited.
Fast forward a decade…
Many different devices like smartphones and tablets came onto the market.
This led to a big uptick in the time people spent browsing the internet. More web fonts were developed to give web designers greater freedom and style choices and improve user experience.
What Are The Different Types Of File For Web Fonts?
Here is a brief overview of the technical aspects of web font files.
Every font within a family of typefaces will come in its own file. The different types of file do have pros and cons.
The most used types of files are as follows.
TrueType fonts have the .ttf file extension.
This font type was originally developed by Apple, and subsequently licensed for use by Microsoft.
Add a TrueType file for each version of the font e.g. bold, italic and so on.
OpenType fonts have the .otf file extension.
This is newer than TrueType and works across Apple and Microsoft operating systems which makes it more commonly used by graphic designers.
It has other advantages with more features contained within the font file.
Embedded OpenType Fonts
Embedded OpenType is also called EOT and comes with the .eot file extension.
These fonts are a form of OpenType designed by Microsoft to be used as embedded fonts on web pages. Microsoft Internet Explorer supports this file type.
Web Open Font Format
Web Open Font Format or WOFF has the file extension .woff. It operates in the same way OpenType or TrueType but it’s compressed. This means it can download content more quickly.
PostScript fonts or .ps1 created by Adobe, are also known as Type 1 Fonts.
They are not compatible across Apple and Microsoft which can lead to issues when different users open the file.
There’s also WOFF2 which offers greater file compression which helps with page loading speeds.
Bear in mind that WOFF2 isn’t as widely supported as WOFF.
Scalable Vector Graphics
Scalable Vector Graphics fonts (SVG) are an image format for two-dimensional graphics, therefore SVG support animation and interactivity.
If your website wants to support iPhone and iPad users, SVG is necessary. It’s the only font file format supported by Safari version 4.1 (or previous versions) for iOS.
It can feel confusing with so many font files to choose from but that’s because there is no one perfect font file for every application. The good news is that the wide choice means there will always be a font file to fit every project.
What Is The Difference Between Desktop Fonts And Web Fonts?
A desktop font is a font designed for installation on a personal computer, and web fonts are recognised by programs like MS Office and iWork on Macs.
Desktop fonts files are usually OpenType, TrueType or Postscript and come with the relevant file extensions .otf, .ttf or .ps1.
Web fonts designed for use in web pages can’t be used in Word or other common desktop applications. They generally come in four file types, TrueType, WOFF, EOT and SVG.
Having only one file type won’t work for all browsers. Having this range of different file formats provide full functionality across all types of browsers.
What Is A Font License – And Do I Need One?
Legally, web fonts are another piece of software.
As with other programs, a license is usually needed to install or use the font.
Buying a license means that the font developer is compensated for their work.
Paying for a font license gives the purchaser rights to use the font in the ways set out on in the license.
Even free fonts have a license for use and any terms need to be observed.
It’s really important to read the license agreement attached to every font downloaded whether it’s paid for or not. Don’t use fonts without getting your head around this aspect of web design first.
Which Font Format Should I Order?
Unfortunately, more than one format is needed for compatibility across all browsers. This means you have to figure out the correct combination of font formats.
This is the technical side of website design that can put many people off. To get around this issue, some people pay quite a lot of money to hire an experienced web designer.
Let a plugin do the hard work for you
The good news is that WordPress has created easy to use plugins for fonts.
This means that users can install the plugin and then select and upload font files in a range of formats. This ensures the best possible browser compatibility.
The alternative to a supported WordPress plugin and theme is writing the custom CSS to apply the fonts within the content. CSS stands for Cascading Style Sheets. It’s the most used style sheet language on the web.
A plugin simplifies the process, so there’s no need to learn the technical side of CSS language which describes the presentation of text. Check out the Fontsy WordPress Plugin which has access to hundreds of beautiful fonts in one click.
Do Web Fonts Slow Your Page Load Time?
Web font performance is something that should be kept in mind because their use can sometimes cause slower loading times.
The reason for this is that the browser automatically loads the HTML and CSS files before it loads the web font files.
Using a WordPress caching plugin can help speed up page loading time.
Large images are major culprits in slowing down page loading time. Again there are plugins available that optimise the size and quality of images without affecting user experience.
Which Are The Most Common Web Fonts?
Design trends are constantly evolving in the web design business and typography is a key element.
Web fonts allow website designers to keep at the forefront of style considerations, as well as projecting the brand identity into the digital space.
Which fonts are the most often used is a tricky question to answer because trends change.
The most commonly used also depends where the web designer is sourcing their fonts from. Currently, all WordPress site owners can access a collection of free Google fonts.
According to Google, some of their most frequently used fonts currently include: Roboto, Open Sans, Lato, Monserrat, Roboto Condensed, Source Sans Pro, Oswald and Raleway.
Popular WordPress fonts include Noto Sans, Mina, Playfair Display and Bench Nine.
Not surprisingly some of the top WordPress fonts are the same as Google’s including Roboto, Open Sans, Oswald and Lato.
Why Your Choice Of Web Fonts Matters
Design-wise, choosing the right fonts is critical.
They play a key role in communicating your website’s personality.
If you are also producing printed material or documents online, remember web and desktop fonts are not interchangeable.
To keep design consistency across the website and other communications a font license is needed for web and desktop font files, even for the same font.
As well as design, the choice of web fonts is important for site functionality. For the optimum visitor experience, a website designer has to test all operating system and browser combinations.
Choosing the wrong web font combination in the first place can cause all sorts of problems.
Why Use Custom Fonts In WordPress
Different custom fonts can be used in combination to create a unique brand presence through your website.
Not only will custom fonts make the website out, used properly they will improve user experience.
This helps develop product or service credibility. It also leads to great customer engagement with the site and lower bounce rates.
Where To Find Custom WordPress Fonts
All of this information might seem too technical or perhaps a bit overwhelming. But even a WordPress beginner needn’t worry because the WordPress font plugin Fontsy makes life easy!
Fontsy comes pre-loaded with a free web font library. It also allows for the import of additional web fonts.
Using this user-friendly plugin your website will have an all in one web font management plugin.
It’s important to note that plugins are only available to WordPress.com users who upgrade to a business plan. WordPress.org users who self-host their website can see the whole range of plugins from their WordPress dashboard.
Once you’ve downloaded Fontsy you can stop worrying about things like CSS, page loading times and browser compatibility. Furthermore, this leaves you free to concentrate on building a fabulous website.