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.

fontspring
Fontspring – get awesome web fonts

Here’s why:

  1. They have a massive library of every font you could ever want.
  2. 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.

    fontspring refund
    Refund from fontspring
  3. 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.
  4. With Fontspring, you pay one time and get the font forever!
  5. All fonts included the ability to use on an unlimited amount of websites.
  6. 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.

proxima soft download
Buy Proxima Soft font

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).

font files local
Unzip Proxima Soft font

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 the free CDN Enabler plugin. This plugin 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.

local fonts ftp
Upload Proxima Soft font to WordPress site

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 a free plugin like Simple Custom CSS and JS. 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 use a theme from MyThemeShop, so I have a custom CSS panel I can easily add the CSS.

custom css mythemeshop
Add web font CSS

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.

For MyThemeShop themes you can disable Google Fonts by opening up the options/google-typography/google-typography.php file and replace the following:

echo $frontend;

with this:

// echo $frontend;

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 roboto font

woorkup After With Proxima Soft Font

Here is woorkup afterwards with the Proxima Soft font.

woorkup 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).

pingdom speed test proxima soft font

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?

GET MORE STUFF LIKE THIS

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

2 thoughts on “How to Use Proxima Soft Font in WordPress

Leave a Comment

5 Shares
Tweet
Share
Share
Buffer