Blog Post: Using Custom Fonts

Red Deer & Blackfalds Web Design Writes:

Here’s a quick and easy article on how to Use Custom Fonts on your WordPress Website. Granted, a lot of new themes have built in functionality to produce a plethora of fonts that can be used on your WordPress site; however, if you have both the .ttf and the .eot font files for a given custom font you can easily insert them into any theme!

First off, take the files and insert them into your WordPress Child Theme just as raw files. From here you will want to reference them using the code below inside of the style.css file.

@font-face {
font-family:”Century Gothic”;
src: url(“gothic.eot”) /* EOT file for IE */
}
@font-face {
font-family:”Century Gothic”;
src: url(“gothic.ttf”) /* TTF file for CSS3 browsers */
}

Note: these references should be kept high up on your child theme style.css file, just beneath any references to additional child theme CSS files.

From here, you can reference inside of any CSS file or directly using on-page CSS by using the same “font-family:” reference you would for typical CSS. For the specific font used in the example, use the following code:

h1, h2, h3, h4, h5, h6, p, a {font-family: ‘Century Gothic’, ‘Open Sans’, sans-serif;}

Keep in mind this will apply the given font to all types of header, paragraph and a-links.

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)