How To Get Downloaded Fonts Into Word

Google Fonts is an amazing resources. Before information technology was so widespread, making websites that used unique fonts was a existent pain. Now, though, with a few clicks and one snippet of code, your website moves from being Helvetic-eh to Helvetic-awesome. Merely what if the font you love isn't a part of the Google Fonts family unit? You need to know how to use downloaded fonts because you've discovered a fantastic hipster font that speaks to your bristles's soul.

Using a downloaded font on your website is non quite every bit simple as clicky-clicky-paste-paste. Information technology'southward not a hard process, mind you lot, and I am gonna walk you lot through information technology then that you never, ever, always have a Helvetic-eh website over again.

Now, I want to point out that you lot can do this via a plugin. There are a handful available in the repo. Simply why would we desire to do that? I am the kind of guy who prefers to avoid using a plugin when a few lines of code will do the same thing. Excess plugins cause tons of bloat, unnecessary HTTP requests, and dull down your site.

So we're going to import these fonts by hand–like it'due south the tardily '90s again. Awww, yeah.

Choosing and Downloading a Font

I'm a big fan of font roundups. Elegant Themes has a ton you can scan through to meet what yous like. Then hit some of these and encounter what you lot like.

Handwriting Fonts
Retro Fonts
Upscale Fonts
Cursive Fonts
Hipster Fonts
Fun Fonts

For me, I am going with the Aventura font from the Hipster round-up.

Your beginning step is to find the download link for the font and relieve the file to your computer. It will likely exist a .zilch file containing diverse file formats. The most mutual ones you'll find is .ttf (TrueType Font) or .otf (OpenType Font).

Making a Webfont (Kinda Optional, but Non Really)

FontSquirrel has a great tool you tin can use to make certain no one and no browser is left incompatible with your site's splendor. Since nigh fonts you download will only be available in a unmarried format, the FontSquirrel tool makes it so that yous're not express past what the font writer distributed. Equally long as yous've got rights to use the font, y'all tin make sure information technology works with your production/site.

Merely upload your recently downloaded font and choice your options. Personally, I use the Good options, just to get all the font formats I tin can. The others piece of work, but you don't get as many file types, which is kind of the betoken of the whole affair.

FontSquirrel is also awesome that it provides yous with the required CSS to import them to your site. How's that for user-friendly? You lot'll but re-create and paste information technology in (which nosotros deal with below).

Uploading Your Font to WordPress

With that done, you'll need to upload the font to your hosting provider. I always do this via FTP (I use FileZilla, merely y'all tin use whatever client yous want).

If you don't know your host's FTP information, head into your cPanel and expect under Files -> FTP Accounts.

You will come across every FTP account for the host in that location, and you should also meet a Configure FTP Client link beside each one.

When y'all go in there, cPanel gives you server information or a FileZilla (and others) file y'all can import to become your credentials set. I go for manual, personally, but you lot do what you like. Even if yous use the file, you'll need the password to login, so both methods are rubber and secure.

At present that you're logged into your host via FTP, navigate to your /wp-content folder for your site. Because this is content for your WordPress site, why wouldn't you put information technology at that place? Experience free to put it wherever, fifty-fifty in /wp-content/uploads. Y'all do you.

FTP is super easy to upload your file. But observe the font file you downloaded and drag it into the bottom-right pane in FileZilla. That volition start the upload. It won't take more than than a 2nd or so for you to encounter information technology in the directory.

If you used the FontSquirrel tool we discussed above, you volition do this for all of the font files you downloaded from them as well. Just drag and drop them into wherever you desire to store them.

Using Your Font with CSS

Your font is at present uploaded and safely snuggled into its warm, comfy wp-content blanket. It's time to add together the needed CSS import to your theme.

Head to your child theme's directory (you lot are using a child theme, right?) in your FTP client and observe the style.css file, right-click it, and select View/Edit to bring it upwards in your default text editor.

If you lot don't have a child theme, use the Orbisius Child Theme Creator to practice it mega-ultra quick. You can delete the plugin afterward. I love this thing.

@font-confront

The code we use comes directly from FontSquirrel (y'all can write your own or re-create/paste the case below), and all I changed was the URL upload path to include /wp-content. Everything else is what the webfont generator provided.

All this @font-face script does is tell your website's stylesheets, "hey, dude, I'm putting this new font over here if yous want to use information technology sometime." You lot know, kind of similar you do when you bring cupcakes home and tell the people you alive with.

Without @font-face, if you try to call font-family: 'aventurabold'; by CSS, your site won't exist able to find it because it'due south never been told where you're keeping it.

@font-face {     font-family unit: 'aventurabold';     src: url('/wp-content/aventura-bold-webfont.eot');     src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),          url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),          url('/wp-content/aventura-bold-webfont.woff') format('woff'),          url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),          url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');     font-weight: normal;     font-style: normal;  }

Relieve the file, and since you opened it to edit through the FileZilla, you will get a dialogue asking if you lot want to supervene upon the ane on the server. Your answer is, obviously, yes.

Now all you take to exercise is get into your custom.css (or if yous use Divi, Divi -> Theme Options -> Custom CSS in your WP dashboard'due south navigation pane.)

Yous simply add the CSS styling in like y'all would for any other font. I simply replaced the 'Roboto' and 'Exo' Google Fonts I was using with 'aventurabold', and things were good to go (thanks to the @font-confront import above).

trunk {     font-family: "aventurabold", arial, sans-serif;     font-size: 18px;     line-height: 28px;     color: #ffffff;     text-transform: uppercase; }  h1, h2, h3, h4, h5, h6 {     color:  #fff;     font-family: 'aventurabold', sans-serif;     font-weight: 700;    text-transform: uppercase; }

The Fruits of our Labors

Here's what it looked like before:

And here's what happened later I added Aventura to the CSS:

Hooray! Information technology works! Good job! Go united states!

Lookin' Good, Friendo

Like Captain Malcolm Reynolds once famously said, "We've done the incommunicable, and that makes us mighty." Well, okay, so uploading a font and importing it via CSS may not quite amount to having done the impossible, simply yous've certainly done something many WordPress users wouldn't dare think of doing: adding cadre functionality without a plugin.

And that, my friends, does indeed make you mighty.

So what's your favorite font to use on the web that's not a Google Font? Tell me in teh comments!

Article thumbnail epitome by 32 Pixels / shutterstock.com