They’re also more flexible than you might imagine. App development is a natural fit. Or use them as a headline font for your gaming blog. They also add a touch of fun to print materials, digital artwork, and video presentations.

Pixel fonts also feature a wide range of styles. Like other fonts, you’ll find both serif and sans-serif options. However, there are also different levels of thickness and character spacing. Each brings a unique personality to the table.

In this article, we’ve rounded up over twenty free pixel fonts available for download. Find your favorites, add them to your collection, and bring on the retro vibes!

Lower Pixel Font (Free)

Enjoy the fun look of this video game-inspired pixel font. Look closely, and you’ll find a delightful mix of squares and rectangles – just like the arcades and consoles of old. The relatively thin weight also keeps things legible.

Super Pixels Font

Here’s a familiar font for fans of a certain classic game series. The package includes a full slate of characters, including punctuation. It’s an excellent choice for adding a bit of nostalgia to your project.

Fight! Pixel Font (Free)

Inspired by old-school fighting games, this typeface features an action-packed look. Its bold and italicized text would be great for headlines and banners. Just don’t get too carried away with your street-fighting and knock over a lamp!

Bitroad Edgy Y2K Pixel Font

Bitroad is a mashup of styles representing the 1980s and 2000s. The font makes a bold statement while staying easy to read. It includes multiple typestyles and is available in several popular file formats.

Sheko Headline Pixel Font (Free)

Bold retro stylings are a hallmark of Sheko. Use it in places where you want to make the most impact. It features tight kerning that’s perfect for headlines and titles.

Go Pixel Font

This all-caps pixel font will do wonders for your retro-themed designs. Each character features a variable outline that adds authenticity. It looks great in any size, and its low-contrast style offers a unique touch.

Dotemp 8Bit Pixel Slanted Font (Free)

Add some slanted perspective to your project with this 8-bit typeface. Dotemp is a serif font that faithfully recreates the look of classic computing apps. It’s a variable font with regular and pixel styles.

Anti Pixel Font

Here’s a font that mixes elements of the old and new. It’s a pixelated font, for sure. However, it’s highly legible and includes some anti-aliasing. This one is a great fit when a more subtle approach to retro is in order.

Handdrawn Pixel Font (Free)

Talk about unique, here’s a hand-drawn pixel font. The result is a fun typeface with classic looks and a decidedly modern charm. It also includes plenty of special characters to make it a versatile pick.

Arcade Pixel

Travel back to the days when arcades ruled with this classic typeface. You won’t find any fancy effects here. The look is simple – a good representation of what once was. Sometimes, that’s all you need to make a statement.

Retro Pixel Font (Free)

Here’s a font with a twist on the pixelated style. It features a rounded look to soften those sharp edges. It’s a nice alternative to the more brutalist options on this list.

Tiny5 Pixel Font (Free)

Tiny5 goes all out when it comes to pixelation. The characters are chunky, and the shapes are free of anti-aliasing. There’s simply no compromise. Therefore, reserve this one for use on headlines and banners.

Silver Pixel Font (Free)

Silver was built with game developers (and gamers) in mind. The multi-language font includes gamepad buttons with full keyboard and mouse prompts. Use it in your apps to give users an authentic experience.

Thaleah Fat Pixel Font (Free)

Be bold and tell a story with this thick pixel font. It’s aimed at game developers but is also a natural fit for website hero areas. It’s another handy choice for your typography toolbox.

Pixelify Sans Font (Free)

Pixelify Sans is a no-nonsense typeface that comes in four distinct font weights. That provides more flexibility than your average pixel font. It can be used in both large and small sizes and maintain readability.

Dogica Pixel Font (Free)

You may notice that Dogica is easier on the eyes than most pixel fonts. It offers monospaced and kerned versions. Either way, you’re getting a legible font that can be used at the tiniest sizes. That makes it an all-purpose winner.

Silkscreen Pixel Font (Free)

Silkscreen is a cross-platform pixel font built for websites and online apps. It’s an all-caps font with extra spacing between characters. It would work beautifully for the text headers on your tech blog.

Smallest Pixel-7 Font (Free)

Need a pixel font fit for smaller sizes? This one fits the bill with the ability to stay legible no matter how low you go. You might use it for those little design accents on websites and print documents.

MultiType Pixel Font (Free)

Give your projects a subtly pixelated look with this display font. It features a distorted style that will help your designs stand out. It’s proof that pixel fonts don’t have to be harsh.

Pigxel Modern Pixel Font (Free)

Here’s a style that looks like it comes from another galaxy. Pigxel brings a lot of curves to the pixel font playbook. Use it to create titles meant to send users far, far away.

NF Pixels (Free)

This minimalistic font’s origins can be traced to an iOS pixel art app. Thus, you can be confident in displaying it on any screen. It also includes plenty of symbols for added flexibility.

PICO-8 Pixel Font (Free)

PICO-8 is available in several flavors, including monospaced, all-caps, and wide. That makes it a good option for niche use cases. Beyond that, this True-Type font is a fun way to spice up your designs.

Pixel Millennium Font (Free)

This pixel font adds extra pizzaz with blocky glyphs and thick sizing. It’s reminiscent of the systems we saw in sci-fi movies from the 1970s and 80s. Perfect for transporting your designs into hyperspace.

Pixel Code Font (Free)

Write code the way our ancestors did – with a pixel font! Pixel Code is a monospaced font designed for use in code editors. It aims to maximize readability and includes a complete set of programming ligatures.

Nb Pixel Font Bundle (Free)

Here’s a collection of 20 pixel fonts – all with a public domain license. You’ll find a variety of styles to choose from. There are great options for fantasy gamers, along with more conventional typefaces.

The Power of Pixelation

Pixel fonts are one of the more fun typographic categories. You’ll find basic similarities. But the details are often what separates them. The font’s weight, shape, and letter spacing are defining factors. You can use them to create different moods and aesthetics.

So, choose your favorites and create something awesome!

The post 20+ Free Pixel Fonts for Creatives appeared first on Speckyboy Design Magazine.

High-quality free serif fonts are readily available, making it easier for designers to create professional work without breaking the bank.

When choosing a serif font, consider its readability, style, and how well it complements other design elements. Factors like the font’s weight, spacing, and overall aesthetic impact are essential.

This collection shares some of the best free serif fonts currently available, providing you with typefaces that combine aesthetics and functionality.

You might also like our collection of free Slab Serif fonts.

Identify the Google Font(s) You Want to Use

The first step in the process is to identify which Google Fonts you want to use in your project. Browse the official site and take note of the following:

• The font name;
• The style(s) you want to use;
• The language(s) you need;

Download the Google Font

Now, you could download your selections directly from Google Fonts. And while there’s nothing wrong with this method, it can be a bit cumbersome.

To use the fonts on your website, you’d have to also call the locally-hosted files via @font-face in your CSS.

That involves looking at Google’s source code for each font, then choosing the correct character set and changing the src attribute to match where your fonts are stored.

For example, if we want to use Roboto’s “light” style, the CSS looks like this (comments added/edited for clarity):

/* latin - is this the only character set we need? */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2'); /* Change to match your local font location */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* This isn't needed at all */
}

Perhaps it’s not the worst thing in the world. But if you have several fonts, each with multiple styles, this can become very tedious.

Add Google Fonts Using Google Webfonts Helper

Hosting your Google Fonts locally doesn’t have to be so complex. The google-webfonts-helper is a tool that makes the process incredibly smooth. It does all of the heavy lifting for you.

Before we start, take note: there may be version differences between google-webfonts-helper and Google Fonts itself. Google Fonts are improved over time. Not using the API means not always having the latest versions.

To get started, search for the font(s) you want to use. Note that you can only work with one font at a time. The steps below will need to be repeated for each additional font.

In our case, we’ll find one of Google’s most popular fonts, Roboto, from the list.

Next, it’s time to select the character set (charset) and styles we need.

Based on our character and style selections, google-webfonts-helper generates the necessary CSS. By default, the code aims to support as many browsers as possible. However, we can also choose to focus on modern browsers as well.

It even allows us to edit the base directory where we want to store the font files. This will be instantly reflected in the CSS.

With all of our settings now applied, a .ZIP archive is available to download. We’ll unzip the archive to the chosen destination and upload it to our web server.

Finally, we’ll paste the provided @font-face code into our CSS. Making note of the font-family attribute, we can add these fonts to whichever CSS selectors we’d like.

Serving Google Fonts Locally

With a few simple steps (and an assist from google-webfonts-helper), you can forego the Google Fonts API and host fonts locally. It not only improves user privacy but also helps to avoid potential complications from API downtime or performance bottlenecks.

That being said, locally hosted fonts do mean more work for your web server. Thus, it’s still important to utilize caching and other optimizations. These factors should be considered before you take the plunge.

Regardless of how you use Google Fonts, it’s nice to know that there are multiple ways of doing so. This allows you to choose the best method for your needs. And hosting them locally may be the right way to go.

The post The Easy Way to Host Google Fonts Locally appeared first on Speckyboy Design Magazine.

Even though the weight of web fonts makes up only a small portion of the overall web page, every optimization you make helps contribute to faster load times. Check out some ways below to speed up those fonts!

What are Google Fonts?

First off, for those of you who might not know, Google Fonts is an open-source (free) directory of over 800 web font families which you can use on your website. They are also available to download locally for print and other uses. Millions of WordPress websites utilize Google Fonts as it is a great free way to enhance the look and usability of your site.

If you are going for pure performance, system fonts will always win, but there is nothing like the professionalism and aesthetic of a good web font. And in fact, typography has been shown to affect conversions in a positive way. But everything has its cost. And so, it is important to understand how adding Google Fonts to your WordPress site affects speed and performance.

How to Use Google Fonts in WordPress

There are a couple of ways to add Google Fonts to your WordPress site. The first and default way is to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the globe.

When you add them to your site there will be an external request to fonts.googleapis.com.

The are also external requests to fonts.gstatic.com for the WOFF or WOFF2 versions depending upon browser support.

WordPress Plugin

If you are a WordPress beginner, the easiest way to add Google Fonts to your website is probably with a free plugin. The Easy Google Fonts plugin is a good popular example. As of writing, it currently has over 300,000 active installs with a 4.9 out of 5-star rating.

Add Embed Code From Google Fonts

It is important to note that most WordPress plugins add slight overhead, and so I prefer to add Google Fonts with their much simpler to use embed code. So, head over to Google Fonts and choose the font you want. For this example, I’m using Roboto.

Click on the “Customize” option. This is an important step as each font family has different font weights. Typically you will want regular, medium, and bold.

Note: Every font-weight you include adds to the overall load time of your fonts, so don’t just select all of them. The less, the better.

Then click on the “Embed” option. This is where you will want to copy the embed code it provides.

Take that code and put it into the <head> section of your WordPress site. There are different ways you can do this, some might prefer to enqueue the fonts, but for this example I simply added the code to the header.php file. Note: This might vary slightly depending on the theme you are using.

Then, to actually make your WordPress theme use the Google Fonts, you have to add some CSS styles. Below is an example of what I’m using. If your theme admin panel doesn’t have a custom CSS editor you can always use a free plugin like Custom CSS and JS.

body {font-family:roboto; font-size:18px;}
h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;}
h1 {font-size:28px;}
h2 {font-size:26px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:18px;}
h6 {font-size:16px;}

Now that you know some quick methods for adding Google Fonts to your WordPress site, I’m now going to do a few quick tests to see alternative ways of speeding them up. I ran some tests first with the setup above and the average speed came out at 418ms. Note: Each test was run five times, and the average result was taken.

Host Google Fonts Locally

Another way to deliver Google Fonts on your WordPress site is to host them locally on your web server. If your audience is in a certain geographical location and close to your server, it can actually be faster to host them locally than it is to use Google Fonts. Google Fonts CDN is great, but adding those additional external requests and DNS lookups can cause delays.

This method will typically only work if you are using fast hosting. In the example, I’m using managed WordPress hosting from Kinsta, which is ironically powered by the Google Cloud Platform.

To host locally I actually utilized a free tool called the google-webfonts-helper. This allows you to download the Google fonts locally more easily and gives you all of the CSS. Below is an example of what we will end up with. You will need to upload the fonts you downloaded to your web server. In this case, I put them in a folder called “fonts.”

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

We then need to make sure to remove the embed code from Google Fonts in the header so that you no longer have those external calls. I then again ran some tests with the setup above and the average speed came out to 386ms.

Note: The web server is located in Iowa, and the speed test from Pingdom was run from Dallas, TX. So as you can see, even though the server is located elsewhere in the United States, it is still slightly faster to load Google Fonts locally on the server. Of course, you will want to test various locations yourself based on your own audience.

Host Google Fonts on Your Own CDN

Now for a third scenario. On the site above, I’m using a third-party CDN provider already (KeyCDN) to host all of the other assets(images, CSS, Javascript, etc.). What happens if we now throw our fonts on the same CDN, instead of Google’s CDN?

I’m using the free CDN Enabler WordPress plugin. This actually copies the fonts from the “fonts” folder on the web server to KeyCDN automatically. We then have to tweak the code slightly so that the path to the fonts is now pointing to the CDN (such as cdn.domain.com).

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I then again ran some tests with the setup above and the average speed came out to 384ms.

As you can see, using a CDN is yet again just slightly faster. Not by much, but if you compare it to Google’s CDN, test it, it definitely is faster. Part of this is because it can utilize the same HTTP/2 connection, and it still reduces the external call and DNS lookup, just as hosting locally does. And of course, one advantage to this method is that it will be globally faster.

Summary

As you can see from the tests above, the Google Fonts CDN is great, but it might not always be the fastest. Of course, it will always depend on your own environment and where you are serving up traffic, whether it be to a local audience or global.

I recommend testing each method above for yourself and see which one is the fastest and works the best for your WordPress site. And remember, only load the font weights you actually need!

The post How to Speed up Google Fonts in WordPress appeared first on Speckyboy Design Magazine.