Nav Social Menu

    • Facebook
    • Instagram
    • Pinterest
    • Twitter

Riot Customs

Genesis WordPress Development, Maintenance & Support

  • About
  • Services
    • Custom Theme
    • Collaborations
    • WordPress Support
  • Themes
  • Home
  • Courses
  • Blog
  • Contact

How to Install Web Fonts to Your WordPress site

Written by Katrina

263shares
  • Facebook 6
  • Twitter 53
  • LinkedIn
  • Tumblr
  • Buffer 2
  • Email

web-fonts
Let’s talk about fonts, who doesn’t love fonts? They make our things pretty, but what about the web? Where do you use them? You’ll need a font for the body, the headline (title), header (site title) etc.

What do we get these said web fonts, well there are tons of sites like MyFonts, Font Squirrel, and Typekit to name a few.

Step 1: Download your files

So now that you’ve purchased the font you’ll be using on your site. You’ll need to download the fonts on your computer (if you have a mac it extracts the file for you) extract your file and place in a place you’ll remember. Make sure you’re using the license for the font properly also.

fontfiles

Usually, you’ll get about 4 files (.eot, .svg, .ttf, .woff) you’ll want to upload all of these into your theme.

Step 2: Uploading into your child theme

This step is pretty self-explanatory, all you do is create a folder in your theme and name it fonts. Then you’ll upload via FTP all your font files into that folder. Easy breezy.

fontfilestructure

Step 3 Include the font in your CSS stylesheet

Now it’s time for some code (mostly copy and paste) most web font providers will provide you with the css code you’ll need to install the font onto your theme. Here’s what that format looks like.


/*
 * Web Fonts from awesomefontplace.com
 *
 * Font copyright information, which you should 
 * never delete and should always be included 
 * in your CSS where ever you call the fonts files. 
 * Copyrights matter.
 *
 */

 @font-face {
    font-family: 'FontName';
    src: url('fonts/FontName.eot');
    src: url('fonts/FontName.eot?#iefix') format('embedded-opentype'),
        url('fonts/FontName-webfont.woff') format('woff'),
        url('fonts/FontName-webfont.ttf') format('truetype'),
        url('fonts/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

With your purchase font information, you’ll enter that into the stylesheet.css file.
fontfilecss
make sure to save your work.

Step 4: Font Declaration

Now that we’ve uploaded the web font in your child theme let’s start using it on the site itself. If you have the basics knowledge of HTML/CSS you’ll know that the code you’ll need to use will look something like this


.entry-title {
    color: #222;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

Step 5: Check your work

Now let’s make sure the font is correctly installed. Head on over to your browser and turn on that firebug tool.
fontdeclare

There you have it, you installed a web font. Woot woot!
Get more lesson like this at the Espresso Workshop.

263shares
  • Facebook 6
  • Twitter 53
  • LinkedIn
  • Tumblr
  • Buffer 2
  • Email

Tutorials, WordPress 3 Comments

Get Simply Noted for Free!

This is a free theme we’ve built for the Genesis Framework. It will help your reader focus on the very content you create on your site. This is a clean, simple theme to showcase your writing or photography skills.

Previous Post: « How To Send Content Upgrades using ConvertKit
Next Post: How to Add a Shop to WordPress Using WooCommerce »

Reader Interactions

Comments

  1. Frank Waterman says

    November 1, 2016 at 6:29 am

    Hi Katrina,

    I’m a newb to web design. HTML, CSS, Linux, etc., etc. Your tutorial is very clearly written and will undoubtedly save me from much hate and discontent!

    I do have one criticism: While Firefox is an excellent browser, not everyone uses it. I am using Chrome myself as are many others. I don’t know if the firebug tool you reference in your final (and very important) step is cross platform compatible or not, but I shall find out. It looks to be a debugger (which would make sense).

    Still I appreciate your tutorial and thank you for posting it!

    Frank

    Reply
    • Katrina says

      November 1, 2016 at 11:04 am

      Hi Frank,

      Firebug is available for cross-browser and chrome, just take a look http://getfirebug.com/releases/lite/chrome/

      Thanks

      Reply

Trackbacks

  1. Add Custom Fonts To Your ConvertKit Form - Riot Customs says:
    January 26, 2017 at 9:25 am

    […] First, make sure to install your fonts onto your site and that they’re working. You can click here to learn how to install fonts on your […]

    Reply

Share Your Thoughts Cancel reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Simply Noted Theme


Simply Noted

A simple theme for the genesis framework. A great theme for writing out your thoughts. Grab this free theme today!

Download Theme!

Categories

  • Blogging
  • Business
  • Client Work
  • ConvertKit
  • Freebie
  • GenesisWP
  • Interact
  • Personal
  • Theme Releases
  • Theme Updates
  • Tools & Software
  • Tutorials
  • Web Design
  • WordPress

Master ConvertKit

A kick ass tech course on using the ConvertKit software. Want to start growing your list with the best email marketing software out there? What are you waiting for? Grab this course now!

Enroll Now!

Popular Post

4 Steps to DIY Your Way to A Professional Looking Website

add woocommerce

How to Add a Shop to WordPress Using WooCommerce

How to Install Web Fonts to Your WordPress site

content upgrades convertkit

How To Send Content Upgrades using ConvertKit

Footer

Dev Info

  • How it Works
  • Trusted Partners
  • Client Portal

Explore

  • Portfolio
  • Resources

Product Support

  • Theme Documentation
  • Submit A Ticket
  • Support Policy

Grab my secrets on how I manage a WordPress site.

Okay so here me out.... the New Year is quickly ap Okay so here me out.... the New Year is quickly approaching. How confident are you in your #WordPress site's performance? 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
If the answer is not really, slide in my DM's or comment below, and let's talk about it.
As I sit here watching #ACharlieBrownChristmas and As I sit here watching #ACharlieBrownChristmas and drinking what could only be my 64568 drink of either booze or coffee. Considering I've been up since yesterday as children and dogs don't care about your slumber. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
I wanted to wish you all a #MerryChristmas and if you don't celebrate that's cool. Have a terrific day off, do some #SelfCare because that shit's important.
So you have a WordPress site but you haven't been So you have a WordPress site but you haven't been taking care of the necessary task required to keep your site running smooth. No worries, we're here to help you with that.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Does this sound like your site?
‼️ Your site is suddenly running slower than usual?
‼️ You've noticed a drop in your website traffic?
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Noticing suspicious activity on your such as...
👉🏾 New Accounts
👉🏾 Forgot Password Request
👉🏾 Login Attempts
👉🏾 Random links appearing on your site
⠀⠀⠀⠀⠀⠀⠀⠀⠀
There's a potential threat to your site due to a lack of much-needed maintenance that hasn't been performed on the site.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
What' is included in the WordPress Security Audit?
🛠️ Checking the updated status of all your plugins and themes.
🛠️ Doubling checking your General Settings to stop bots from signing up to your site
🛠️ Run a security scan for vulnerabilities.
🛠️ A full breakdown of recommendations on how to improve your site performance.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Sounds like a service your need? 
It is, so DM for the #WordPressAudit today and get your site secure in less than 24 hours.
Let's work on giving your website the maintenance Let's work on giving your website the maintenance and protection it deserves. Because your business and your customers suffer when you aren't taking care of your site. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Using a strong password keeps your accounts safe from being hacked.
✔️Has 12 characters minimum.
✔️Has numbers, symbols, capital, and lower case letters
✔️Isn't a dictionary word
✔️Doesn't rely on obvious substitutions (pets names)
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Installing an SSL certificate and why it matters if you have one?
✔️HTTPS protects the privacy and security of your users. 
✔️HTTPS protects the integrity of your website
✔️Search engines like Google prioritize HTTPS sites and boost your SEO. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Without HTTPS the data going to and from your site will pass through unsecured. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
It's important to NEVER use 'admin' as a username. It's the first thing hackers use to take over your site. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Change your user name ASAP, here's how...
1️⃣You'll need to create new users imply by doing Users > Add New.
2️⃣Use an email address that's not currently attached to Admin. You can always change it later. 
3️⃣Choose a strong password, None of this pet name, family member nonsense. See above for ways to create a strong password. 
4️⃣Don't forget to assign the role as an administrator. You'll need to move everything over to the new user when you delete Admin.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Daily website backups, a good hosting company will have this as one of the main features. Great hosting is also very important to maintenance. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Last but not least, keep those plugins up to date.
Are you launching new web projects in the new year Are you launching new web projects in the new year and in need of a developer? Let's turn that dream come true design of yours into a real-life functioning WordPress site. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
I'm currently booking custom theme development spots for 2021. Apply on the site. 👊🏾
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#WordPress #WordPressDesign #WordPressDevelopment #WebDesign #DesignToConvert #WebDevelopment #WebDesigner #BlackGirlsCode #WomenWhoCode #GenesisWP
"Gratitude turns what we have into enough, and mor "Gratitude turns what we have into enough, and more. It turns denial into acceptance, chaos into order, confusion into clarity...it makes sense of our past, brings peace for today, and creates a vision for tomorrow." Melody Beattie
⠀⠀⠀⠀⠀⠀⠀⠀⠀
2020 has continued to be the roller coaster no one asked to get on. I actually broke my face at the start of the year. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Enjoy your small gatherings this year so that those lives will be here die future family gatherings. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
There’s so much to be grateful for and I am thankful to all of you. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
1. My health. I haven’t had a set back all year with my autoimmune disease. Regardless of fracturing my jaw early this year as a result of said disease. I haven’t been hospitalized all year. 🙌🏾
⠀⠀⠀⠀⠀⠀⠀⠀⠀
2. Because I Katrina proof my business. It’s still running even with financial shit that comes with this pandemic.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
3. Finding what could be potentially a life partner. (I keep things on the low but you nosy it’s on my personal page @thekatrinam) 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
What are you grateful for?
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#HappyThanksgiving #Thanksgiving2020 #QuarantineThanksgiving

Copyright 2009 - © 2021 · Riot Customs LLC · Privacy Policy · Terms of Service
Riot Customs LLC has no offical affiliation with StudioPress
Return to top of page

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkRead more