How to Add Custom Fonts to WordPress

How to Use Custom Fonts in WordPress

An OSTraining member asked us how to add two extra fonts to their WordPress site:

  • A custom font
  • A safe font, such as Times New Roman

In this tutorial, I’m going show you how to use CSS to add fonts to WordPress.

Note: if you want to add Google fonts, use this plugin instead.

Step #1. Simple Custom CSS plugin

Step #2. Get your font files

Download the font files that you are going to use. Popular sources of fonts include My Fonts and Font Squirrel.

  • Decompress the zip folder.
  • Look for the font files which will have formats like these: .eot, .ttf/.otf, .woff, .woff2, .svg
  • Upload the font files into your theme’s folder wp-content/themes/your-theme/fonts/

Step #3. Add @font-face to your CSS

  • In your WordPress site, go to Appearance > Custom CSS.
  • Add the code below, making sure to replace /your-theme/ with your theme’s folder:

{codecitation css}@font-face {
font-family: ‘font name’;
src: url(‘wp-content/themes/your-theme/fonts/font-file.eot’);
src: url(‘wp-content/themes/your-theme/fonts/font-file.eot?#iefix’) format(’embedded-opentype’),
url(‘wp-content/themes/your-theme/fonts/font-file.woff’) format(‘woff’),
url(‘wp-content/themes/your-theme/fonts/font-file.ttf’) format(‘truetype’),
url(‘wp-content/themes/your-theme/fonts/font-file.svg#font-name’) format(‘svg’);
font-weight: normal;
font-style: normal; }{/codecitation}

  • For every font file available, add the path inside of url() data type. If you don’t have one of the formats such as .svg, just skip that line.

{codecitation css}url(‘wp-content/themes/your-theme/fonts/font-file.eot’){/codecitation}

  • Replace font-family with your own name:

{codecitation css}font-family: ‘font name’;{/codecitation}

  • Define the weight and style if you plan to add font variations. By default, set normal as the value for both:

{codecitation css}font-weight: normal;
font-style: normal;{/codecitation}

Step #4. Chose the font settings

Under the previous code, define which elements will use the new font. To do this worth learning Firebug or another inspection tool in order to find the CSS selector.

For example, if you want to assign the font to the body (all content):

{codecitation css}body {
font-family: ‘font name’;
}{/codecitation}

To assign to paragraphs:

{codecitation css}p {
font-family: ‘font name’;
}{/codecitation}

To assign to the headings:

{codecitation css}h1,
h2,
h3 {
font-family: ‘font name’;
}{/codecitation}

To include a class or id in the selector:

{codecitation css}#my-id h1,
.my-class p {
font-family: ‘font name’;
}{/codecitation}

Note, if your font is not being picked up, include !important declaration in order to force your theme to recognize the font:

{codecitation css}p {
font-family: ‘font name’ !important;
}{/codecitation}

Step #5. Include safe fonts

Safe fonts are easier to use in a website due are already installed in a wide range of computers system. To add a safe font such as Comic Sans, Impact, Times New Roman, Arial, Helvetica, etc. assign the font-family to your site’s elements:

{codecitation css}p {
font-family: ‘Times New Roman’, Times, serif;
}{/codecitation}

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
guest

8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
hantaah
8 years ago

what is the advise regarding adding different formats? Do we need to add them all or is it ok to add just otf for example?
Also if you are adding multiple fonts do we just add duplicate code as the @fontface one above or is there a way to add multiple ones into the code above?

htmgarcia
8 years ago

Hi @MuslimahWebDesign,

It’s recommended to include all the formats due each browser support specific files.
Regards

prashant
prashant
7 years ago

Hi! Thanks.That’s exactly what I’m looking for.Do a visitor see the font if I am using a rare font by your process?

Ronel Resurreccion
Ronel Resurreccion
6 years ago

i have kleo theme for wordpress,

i did as the instruction said but nothing happened.. is there other method if im using a theme?

Morgaine O'Herne
Morgaine O'Herne
6 years ago

I did several searches to try to find out how to do this using relative links, and yours is the first I found that made it work. Thanks so much.

divya
divya
5 years ago

Hi there! The smaller font under each word tells the actual name of the font. The “sparkling” one is called Sweet Pea font and the link is: http://www.dafont.com/sweet-pea.font
The clickable links to all of them are right under the image!
Thanks!

W Zaman
W Zaman
4 years ago

You can add Bengali font. 

dinesh
dinesh
3 years ago

Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

8
0
Would love your thoughts, please comment.x
()
x