How to Use Proxima Soft Font in WordPress

I am actually a huge fan of fonts, and have been waiting for a new font to come around for a while now that I really like. I almost moved to Proxima Nova a few months back, which is a very popular font. But thankfully I got busy, because as of January the new Proxima Soft font is now out! Check out my steps below on how I add Proxima Soft font to my WordPress site and host it on my CDN for better performance.

Proxima Soft

Proxima Soft, is not to get confused with Proxima Nova, which is a font that has been around for a long time and used on thousands of sites across the web. In fact, it was voted as one of the most popular sans-serif fonts by Typewolf.

Proxima Soft is actually a rounded version of Proxima Nova, created by the same guy, Mark Simonson. He released this new and updated version in January 2017. I am a huge believer that a good font can make or break a website when it comes to readability. It can also help you stand out from the hundreds of thousands of other sites out there. And when I saw this new updated version I just had to have it :wink:

Where I Get the Proxima Soft Font?

When I go with a 3rd party font other than Google Fonts, I get my fonts from Fontspring. These guys are simply amazing! When it comes to doing web fonts the right way, these guys excel among all the rest.

Here’s why:

• They have a massive library of every font you could ever want.
• They have demo versions of their fonts so you can try before you buy. Also, I have gotten a refund from them before, and they were great about it. Their support is awesome.

• They care about performance and trust you as a buyer. Many 3rd party font providers such as TypeKit and MyFonts all require 3rd party scripts to function or track your usage. Fontspring has no tracking scripts, no JavaScript, nothing required, other than hosting the fonts yourself. This is ideal because both TypeKit and MyFonts cause performance issues. I have used TypeKit in the past, and their service actually goes down a lot more than people think. And when it does, your font just breaks on your site.
• With Fontspring, you pay one time and get the font forever!
• All fonts included the ability to use on an unlimited amount of websites.
• Their pricing is actually quite cheap! You can get up and going with a new font set for under $100. Sometimes even under $45 depending upon what you want.

Getting Proxima Soft Font on my WordPress Site

Follow the steps below that I used to get the custom Proxima Soft font on my WordPress site, as well as serving it from my CDN (KeyCDN).

Step 1

The very first thing I did was go over to Fontspring and purchase the bold and regular versions of Proxima Soft. The total cost was $44.00. The great thing is that for each additional one you purchase it gets discounted at around 50%. After you purchase your fonts, you will get an email with a link to the font files.

Step 2

Each font will have different font types, such as WOFF2, WOFF, TTF, EOT, SVG, etc. I only care about modern browsers, so I am using just WOFF (see WOFF browser support) and WOFF2 (see WOFF2 browser support).

Step 3

I then take the font files and upload them via FTP to my WordPress site. I created a folder in the root of my site called “fonts.” In this example, I am using a KeyCDN for all of my assets, along with our Perfmatters plugin to hook up the CDN. This automatically copies my fonts I just uploaded locally over to the CDN. The important part about using a CDN is that you are serving all your assets from the same location, not referencing multiple domains (hosts). This is where it can also be beneficial over Google fonts.

Step 4

After I have uploaded the fonts to a folder on my server, I need to reference the new fonts in CSS. A lot of themes have a custom CSS panel nowadays, or you can use drop this into the WordPress Customizer under “Additional CSS.” I then insert the following code, referencing my CDN URL.

@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.woorkup.com/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.woorkup.com/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.woorkup.com/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.woorkup.com/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

I then add the following styles to point to the new font family. Here is an example of the code I used.

body {font-family: proxima_softregular; font-size:18px; color:#444;}
h1,h2,h3,h4,h5,h6 {font-family:proxima_softbold; text-transform:none !important; color:#414a51;}

Step 5

If your WordPress theme has Google Fonts already integrated into it, you will want to ensure that you disable it. Otherwise, you might be loading both your local fonts and the Google Fonts.

For most themes, you will probably need to reach out to the developer and they can quickly provide a function to disable Google fonts. Or check their documentation, typically this is a very quick tweak. Some themes may even have an option to turn them on or off in the back-end. Our Perfmatters plugin also has a Disable Google Fonts option.

And that’s it! Here is a screenshot before and after.

woorkup Before With Roboto Font

Here is woorkup before with the Google Roboto font.

woorkup After With Proxima Soft Font

Here is woorkup afterwards with the Proxima Soft font.

And as far as performance goes, I am still left with a pretty blazing fast site, as seen on my Pingdom test. However, this is mostly thanks to Kinsta (my host), and KeyCDN (my CDN).

Update: I am now using system fonts on this site. They have no overhead and look great!

Summary

And that’s it! Fontspring has a lot of fonts, but I am digging the Proxima Soft font right now. The above instructions will also work with any 3rd party font from them. What do you think? Do you have a web font you have been wanting to try?