Use Your Own Fonts

I think it’s important to make sure the font on your website match the font on your branding. You might want to consider streamlining your brand by using the fonts in your header graphic on your blog. This is a tutorial on how to add your own font(s) to your website. Please make sure that you have permission to use the font(s), whether in the form of a Creative Commons attribution, or through a purchase.


How to call up Google Fonts:

Google is really helpful with this. They write the code for you.  All you have to do is choose your font(s):



Then, there will be a gray box at the bottom of your page. Click to expand it, and there are instructions for using the fonts with automatically generated code. I use the @import command:

@import  “|Raleway”;

How to call in a font you’ve uploaded:

You need to be familiar with your cPanel in order to do this properly.

@font-face {

font-family: ADELE;

src: url(ADELE-Light.ttf);



Then, you can use YOUR font like this in the same CSS window:

.genesis-nav-menu a {

 font-family: ADELE, Helvetica, Arial, sans-serif;

color: #333;

font-size: 18px;

font-weight: normal;

letter-spacing: 1px;

padding: 15px;


How To Use Your Own Fonts - BloggyPedia

Bookmark the permalink.

Leave a Reply

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

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