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}

Instructor

  • 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
Blog Rating
Subscribe
Notify of
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
hantaah

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

Hi @MuslimahWebDesign,

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

prashant

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

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

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

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

You can add Bengali font. 

dinesh

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