Note: In the announcement image the parameter is incorrectly labelled ‘font-display=’, the parameter is just ‘display=’.
The integration of font-display had been a heavily requested feature for years. This GitHub request from 2016 amassed hundreds of comments and upvotes.
Why’s it important?
When the font-display property is not set for Google Fonts, the browser waits until the font has been downloaded before showing any text.
That means if your visitors internet connection is slow or there are problems connecting to fonts.googleapis.com, they could be shown a blank space for up to a couple of seconds. This is referred to as the Flash of Invisible Text (FOIT).
How does font-display help?
The font display property has five potential values:
font-display: auto;
The default value, the font display mode is set by the browser and chosen from the four options below.
font-display: block;
The browser will show invisible text for up to 3 seconds, it will then display the Google Font if it has downloaded.
font-display: swap;
The browser will initially show a fallback font, then once the Google Font has downloaded it will swap the fonts.
font-display: fallback;
The browser will initially show a fallback font, if the Google Font is downloaded within 3 seconds it will swap the fonts. If the Google Font can’t download in 3 seconds or less it will continue using the fallback.
font-display: optional;
This mode is very similar to fallback, except the wait time is a lot lower. If a font hasn’t downloaded in 100ms the fallback will persist. To realistically load in 100ms a Google Font must already be in the visitors cache.
How do I use this new feature?
To implement font-display when using Google Fonts you just need to add an extra parameter to your request.
That’s all there is to it. I personally recommend using ‘swap’ , but all the values we explored above will work.
Web Safe / System Fonts List
Web Safe fonts, also known as “system fonts” or “browser fonts” are fonts that are commonly installed across most operating systems. There are two key advantages to using web safe fonts:
Speed
System fonts already exist on your visitors machine, so they don’t need to be downloaded by the browser before your text is rendered.
Consistency
By avoiding the use of fallback fonts, you ensure your typography is displayed consistently across devices.
What are Fallback Fonts?
Each operating system comes with its own collection of fonts, most of the time the fonts are not common across operating systems. For example macOS has included Lucida Grande since 1999, while it’s never been included with Windows or Linux.
Different versions of the same operating system can also support different fonts. Users of macOS from v10.11 El Capitan onwards will have access to San Francisco UI, users on older versions won’t.
When rendering web pages, the browser has contingencies for missing fonts, called fallbacks.
Browsers interpret the code from left-to-right. In the above code, if Lucida Grande isn’t available, the browser will try Lucida Sans Unicode next and keep moving right → until it finds one that is available.
In cases where no available fallback is defined in the CSS, the browser will use its own fallback font. For sans-serif font the browser fallback is usually Arial (Windows) or Helvetica (macOS). For serif fonts it’s Times (macOS) or Times New Roman (Windows).
Web Safe Fonts List
For the rest of this article we will be looking at fonts that are pre-installed with the latest versions of both Windows and macOS.
1. Arial
p {
font-family: Arial;
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
2. Comic Sans
p {
font-family: "Comic Sans MS";
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
3. Courier New
p {
font-family: "Courier New";
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
4. Georgia
p {
font-family: Georgia;
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
5. Impact
p {
font-family: Impact;
}
The quick brown fox jumps over the lazy dog.
6. Palatino
p {
font-family: Palatino;
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
7. Tahoma
p {
font-family: Tahoma;
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
8. Times New Roman
p {
font-family: "Times New Roman";
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
9. Trebuchet
p {
font-family: "Trebuchet MS";
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
10. Verdana
p {
font-family: Verdana;
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
11 Best Sans-Serif Fonts (Free)
Choosing the right typeface is one of the most challenging aspects of design.
Many “free” fonts are limited in the range of variants they offer and use restrictive licenses, making it tempting to fall back to your usual favourites.
Fortunately, high quality sans-serif fonts do exist and many of them are free for both personal and commercial use.
Here are 11 sans-serif fonts that we love.
1. Source Sans Pro
Designed by Paul D.Hunt and released in 2012, Source Sans Pro is Abobe’s first open source font.
Source Sans Pro supports six font weights, making it a versatile sans-serif font that can be used for both headings and body content.
2. PT Sans
PT Sans is a beautifully modern font based on the Russian sans serif types of the second part of the 20th century.
3. Ubuntu
Released in 2010, the Ubuntu typeface is funded by Canonical and has been released for free to benefit the Ubuntu project and the Free Software Community as a whole.
Predictably, the font can be seen in-use on the Ubuntu website.
Looper also uses the both Ubuntu and Ubuntu Condensed to great effect.
4. Noto Sans
Noto Sans (and its sister font “Noto Serif”) were designed with a goal in mind, to make the typeface visually harmonious across all languages.
The Google team have made great progress on their aim, the Noto Serif font has coverage for 237 regions and almost 600 languages.
5. Raleway
Designed by Matt McInerney, Raleway was initially a thin sans-serif font with just one weight. In 2012 it was expanded into a full 9 weight collection.
As a thin font, Raleway shines when used for headings, as can be seen on local.com.
6. Helvetica Neue
Helvetica has dominated the world for over 50 years.
It’s been used in government publications, signage all over the globe, and can be seen in some of the most recognisable brand logos such as American Apparel and Jeep.
Helvetica Neue is a reworked version of Helvetica that is more commonly used across the internet than its predecessor, due to its improvements in consistency and readability.
As neither Helvetica or Helvetica Neue are web safe fonts, they are often used as fallbacks for fonts such as Proxima Nova, rather than the website’s primary font.
7. Nunito Sans
Nunito Sans is one of many extremely popular open-source fonts created by the late Vernon Adams. It’s a well-rounded typeface which shares a lot of similarities with Proxima Nova.
Like Proxima Nova, Nunito Sans is a balanced typeface that works well for almost any application.
8. Oxygen
Oxygen is another font designed by Vernon Adams. Unlike Nunito Sans it doesn’t feature the full range of weights, which makes it a little less versatile.
E-junkie is a great example of a beautifully designed website which uses Oxygen for it’s headings and Muli for all other content.
9. Hind
Hind was specifically designed with User Interface design in mind. The tall x-height and flat stroke endings make this typeface very legible.
10. Lato
Lato is a very popular and versatile typeface used by some of the biggest websites on the internet. Popular examples include: Merriam-Webster (headings), SourceForge (body content) and GoFundMe (all content).
11. Montserrat
The Montserrat name stems from the neighbourhood in Buenos Aires which inspired Julieta Ulanovsky to design this typeface.
Julieta designed Montserrat in an effort to preserve the typography she saw on old posters and signage of the historical neighbourhood.
11 Best Serif Fonts (Free)
Finding great fonts can be incredibly difficult and often involves looking towards premium font foundries.
While font foundries such as Hoefler & Co. provide excellent fonts that are well-worth the cost, sometimes your project doesn’t necessitate the investment.
Fortunately, free serif fonts do exist and many of them are of a very high quality.
Here are 11 of our favourite serif fonts.
1. Georgia
Any list of serif fonts would be incomplete without Georgia. Released by Microsoft in 1996, the typeface was specifically designed for the low-resolution screens of the time.
Georgia is a system font that displays consistently across all operating systems. This has made it a staple for web designers over the past 20+ years.
2. PT Serif
PT Serif is part of the larger PT Fonts collection. Its development was funded by the ‘Russian Federal Agency for Press and Mass Communications’ and dedicated to the 300 year anniversary of the civil type invented by Peter the Great in 1708–1710.
One of the most notable uses of the PT Serif font is the TIME website, which uses the typeface for its article content.
Entrepreneur.com, another top 500 website, also uses PT Serif for both headings and body content.
3. Lora
Lora is a modern serif font which works well for both headings and body content. Its contemporary appeal has been appreciated by the hip Urban Dictionary which uses the fonts for its headings.
4. Noto Serif
Noto Serif (and its sister font “Noto Sans”) were designed with a goal in mind, to make the font visually harmonious across all languages.
The Google team have made great progress on their aim, the Noto Serif font has coverage for 237 regions and almost 600 languages.
Libre Baskerville is an evolution of the original Baskerville font. Unlike its predecessor, Libre Baskerville is optimized for the web rather than print.
6. Vollkorn
Vollkorn is a strong font that comes in a range of weights, which makes it perfect for headings or body content.
Friedrich Althausen, the designer, describes Vollkorn as a “healthy typeface”. When translated from German, Vollkorn means ‘wholegrain’. Surprisingly, Vollkorn was the first Althausen’s ever released (2005).
7. Roboto Slab
The Roboto font family is a modern typeface collection developed by Google in 2011 and used in their mobile operating system Android. Fortunately for us, they released the entire work under a Libre license.
Slab fonts have a strong and stable aesthetic. It’s been used to good effect on the WWE website, where Roboto Slab is the chosen typeface for article content.
Merriweather is an excellent font choice for body text. Its large x-height makes it very readable. It also features all the variants you might need in your content:
Light and Light Italic
Regular and Regular Italic
Bold and Bold Italic
Black and Black Italic
9. Slabo 27px
Slabo 27px is an interesting font. Unlike the other fonts in this list, it’s only designed to be displayed at one size and one weight: 27px regular.
The unique design of this typeface makes it an appealing choice even with the restrictions it imposes.
Of course, you don’t need to strictly adhere to the 27px font-size. The Yes Network website, for example, displays the font at 24px and it still looks great.
10. Bitter
Bitter has an above-average stroke width which makes it a better choice for headings rather than body text.
The unique curves give the typeface a soft playful feel, while still retaining the professional aesthetic that slab serif fonts offer.
The careers page of MyHeritage is a great example of Bitter in-use.
11. Arvo
Arvo features very straight, square strokes. The absence of curves gives this typeface a professional look when compared to the softer Bitter typeface.
Arvo shines when used a heading font, as can be seen on the NAEYC website.
How to Find CSS Selectors
The custom elements feature of Fonts Plugin Pro allows you to control the typography of any section of your website by targeting CSS selectors. In this article we are going to look at how to find CSS selectors.
Understanding CSS Selectors
CSS selectors can be IDs or Classes. Here’s an example:
<h2 class="sidebar-heading">Welcome!</h2>
In this example, we are using a class named ‘sidebar-heading’.
Most modern browsers have tools that make it possible to find the selectors of an element without having to view the entire page source.
In Chrome, right click an any part of your website and click ‘Inspect’ and you will be shown a myriad of information about the element.
Inspect Element in Chrome
This might seem like information overload, but for our purposes we only need to focus on one small part of this view, the ‘Styles’ column.
The ‘Styles’ column tells you which styles are being applied to an element, the list is ordered by priority. In most cases the styles at the top are being applied and overwriting any displayed below.
Tip: Chrome shows us which styles are being overwritten by crossing them out.
In the example above we have right-clicked the byline element, and Chrome is telling us that there are styles being applied to the .byline class.
Building Your Setting
Now we know the CSS Selector of an element we want to control the typography of, we can easily create a Custom Element inside the Fonts Plugin Pro.
Customizer → Google Fonts → Custom Elements
Click ‘Save Elements’ then navigate to Google Fonts → Advanced Settings → Custom Elements and your new setting will be available:
The Best Google Font Combinations
With the Google Fonts collection surpassing 900 fonts, it can be hard to choose the right font combinations. In this article we are going to look at some of the most popular combinations as well as some of our favourites.
The most popular Google Fonts are Roboto, Open Sans and Lato, so naturally the most popular font combinations include those too.
Roboto Slab + Open Sans
Oswald + Open Sans
Oswald + Open Sans
Slabo 27px + Lato
Slabo 27px + Lato
Roboto Condensed + Roboto
Roboto Condensed + Roboto
Montserrat + Lora
Montserrat + Lora
Our Favourites
Here we’ve tried to highlight some less well-known, but equally stunning font combinations.
Caveat + Merriweather
Caveat + Merriweather
Source Sans Pro + Source Serif Pro
Source Sans Pro + Source Serif Pro
Volkhov + Carla
Volkhov + Carla
Spectral + Rubik
Spectral + Rubik
Work Sans Bold + Work Sans Light
Work Sans Bold + Work Sans Light
Nunito Sans Bold + Nunito Sans Light
How To Add Google Fonts Using CSS
Google Fonts is a collection of 900+ stunning fonts that you can use on your personal or business website for free. In this guide we are going to look at how to add Google fonts using CSS.
The first step is to choose the font(s) you want to use on your website.
With so many choices it can be tough to choose. Luckily Google has the option to sort by popularity.
Once you’ve chosen your fonts, click the red plus sign on each one to build your collection. Each font does add some weight and loading time to your pages, so I recommend limiting yourself to two fonts.
Google will begin counting your fonts at the bottom, click the black bar to see more information.
There are two ways to embed your fonts: ‘Standard’ and ‘@import’. We will be using the import method as it only requires editing one file, your .css file.
Get Your Import Code
Click @import and Google will present you with some code you can copy and paste. For this example I will be using two fonts, Dosis and Quicksand:
This code can be pasted directly at the top of your .css file. The @import code will pull in all the required font files for the fonts you have chosen.
Specify Your Fonts
Now you have imported the fonts, you can begin using the fonts within your CSS file. There are two ways you can do this:
Modify an Existing CSS Rule
Your website likely already has rules for how text should look, for example:
body {
font-family: Arial;
font-size: 16px
color: #000;
}
I chose the ‘Dosis’ font above, so I will replace Arial with that.
body {
font-family: Dosis;
font-size: 16px
color: #000;
}
Editing existing rules is a good option and will work almost every time. However, you may not want to touch existing code, or you might want to create a rule that targets a specific set of elements. To do that, we create new rules.
Create New CSS Rules
Because of CSS inheritance, this technique is more likely to work if you place your new rules at the bottom of your .css file. In this example I will assign the ‘Quicksand’ font to text in my sidebar:
.sidebar {
font-family: Quicksand;
}
I could also be more specific and only target headings in the sidebar:
Sometimes, because of CSS specificity, your new rules won’t work. If you are interested in learning CSS it’s valuable to learn why that is happening. But for now, we can shortcut that process by using the !important property.
.sidebar {
font-family: Quicksand !important;
}
Declarations using !important will overwrite most other settings, which is why this will almost always work.
Final Thoughts
Google Fonts is one of the best free resources available for customizing your website. In this guide, we have looked at the easiest way to add them using CSS. If you’re looking for extra inspiration, check out these excellent font combinations.
A Beginners Guide to Using Google Fonts in WordPress
Typography is one of the most important elements of your website. As a minimum, your website needs to be clear and easily readable. Yet, typography also offers much more. The right font choices can enhance your brand while the wrong ones can undermine it.
In the beginning, websites were built using a handful of fonts called ‘Web Safe Fonts‘. Web Safe Fonts are a limited set of fonts that come pre-installed with operating systems, using these ensured your website’s text displayed consistently across all devices.
Then, in 2010 Google raised the bar on web typography by launching their Google Fonts collection. Their mission was clear:
“Making the web more beautiful, fast, and open through great typography”
https://fonts.google.com/about
With over 25 quadrillion views, it’s safe to say that has been achieved.
The Google Fonts collection contains more than 900 font families, with more being added on a regular basis. The fonts display correctly on all devices (including mobile) and are completely free to use for both personal and commercial use.
So you’re sold on using Google Fonts, how do we use them in WordPress? Thankfully, it’s super easy using a free plugin.
The preliminary work is done, now we can start using the fonts. Navigate to Appearance → Customize and you will see a new tab in your Customizer named ‘Google Fonts’.
One of the great things about this plugin is that it’s split into two panels:
Basic Settings – Perfect for quickly adding one or two fonts across your whole website.
Advanced Settings – These allow you to customize each element of your site individually, some examples include Site Title, Site Description, Headings (H1 → H6), Sidebar Typography and Footer Typography.
In this guide, we will be setting a single font for our headings, and one for content. We can do that without leaving the ‘Basic Settings’ panel.
At this point I recommend browsing fonts.google.com to give you some ideas of fonts you might use.
Now the fun part! Once you have some ideas, we can try them out and preview how they will look on your website.
Note: Your changes won’t be made live until you press ‘Publish’.
Some fonts only support a single ‘Font Weight’. While others, such as Roboto, support up to 6: Thin, Light, Normal, Medium, Bold, Extra Bold.
Six Weights of Roboto
If you are using a single font across your entire website, it’s a good idea to choose one with various weights, a few examples include:
The most common approach is to use one font for headings, and another for body text. Doing this adds visual interest to your content. Some good font combinations are:
Slabo & Roboto
Slabo & Roboto Font Pair
Merriweather & Lato
Merriweather & Lato Font Pair
Bitter & Source Sans Pro
Bitter & Source Sans Pro Font Pair
Tip: A good font pairing combines two fonts that aren’t too similar. For this reason choosing one serif and one sans-serif font works very well.
Optimizing Google Fonts
There is one downside to using Google Fonts, they are not installed on your visitor’s device. That means they need to be transferred from Google’s servers to your visitor’s device when they first load your website.
Web browsers implement techniques to ensure fonts are loaded in the most efficient way. One technique they use is to cache the files so they require less bandwidth on subsequent loads (even across different websites). But there are still things you can do to optimize your usage:
1. Host Google Fonts Locally
By hosting Google Fonts locally, you remove the need for the browser connect to Google’s servers. This removes one HTTP request and can also help with GDPR-compliance. Google Fonts Pro features a one-click toggle to enable Local Hosting:
2. Limit Font Families
With so many great choices, it’s tempting to use too many different fonts. My personal recommendation is to use a maximum of 3 fonts on a single page, ideally just one or two would be better.
3. Limit Font Weights
Open Sans includes 4 font weights: light, regular, bold and extra bold. Each weight carries some cost in terms of bandwidth. If you’re only going to use Open Sans for headings, which are always bold, it makes no sense to download the regular and extra bold weights.
Final Thoughts
Google Fonts is one of the best free resources available for adding character to your website. In this guide, we have looked at the easiest way to add them to WordPress. If you’re looking for extra inspiration, check out these excellent font combinations.
Google Fonts Similar to Gotham
Gotham is a broad, geometric sans-serif typeface. Designed by Tobias Frere-Jones and originally commissioned for GQ magazine, Gotham is heavily inspired by the streets of New York.
“I suppose there’s a hidden personal agenda in the design, to preserve those old pieces of New York that could be wiped out before they’re appreciated. Having grown up here, I was always fond of the ‘old’ New York and its lettering.”
Tobias Frere-Jones
Gotham is widely visible across the web. Over 8000 of the top one million websites use the font, including upwork.com and QVC.com.
Gotham is part of Hoefler & Co’s typography bundle and can be used on your website from $99/year (250,000 page views per month).
In 2008 Gotham was used in the Obama campaign. Then years later a custom serif version of Gotham was created for Obama’s 2012 campaign too.
Gotham in Obama’s Campaign
Google Fonts Alternatives
Gotham is undeniably a unique font with a lot of character, which makes it hard to find a close match in Google Fonts. Here’s what I’ve found so far:
Raleway
Raleway is the most similar font to Gotham in the Google Fonts directory. Raleway was originally designed by Matt McInerney in a single weight – thin. It was then expanded to include 9 weights by Pablo Impallari and Rodrigo Fuenzalida in 2012.
Raleway Comparison
Montserrat
While Montserrat is often touted as a Gotham alternative, there are significant differences – the tail on the Q is the most noticeable.
Montserrat Comparison
Open Sans
Open Sans does have similarities to Gotham, but right away you will notice the Q and E are a significant departure.
Designed in 1988 by Adrian Frutiger, Avenir is a sans-serif typeface which Frutiger describes as his “masterpiece”.
One of its most famous uses is as system font bundled with macOS.
Avenir has been used everywhere, from Snapchat’s interface to Apple Maps. It’s used on over 4,000 of the top million websites and features six weights:
Light
Book
Roman
Medium
Heavy
Black
To use Avenir on your website you will need a Webfont license. At $35 per 250,000 page views, it’s not as expensive as fonts like Proxima Nova. But it still might be a cost you can avoid.
While Avenir is a beautiful timeless font, the following alternatives are very similar and deserve some consideration considering they are free to use.
Nunito Sans
Originally designed by Vernon Adams, then later expanded to include more weights by Jacques Le Bailly. Nunito Sans is an extremely close match for Avenir. See for yourself:
Nunito Sans Comparison
Lato
Lato is a humanist sans-serif typeface designed by Łukasz Dziedzic. Released in 2010, it’s now used on nearly ten million websites.
