Take the 2-minute tour ×

I want to add a custom font into my theme. Please let me know if this is just as simple as uploading the font to a new folder named "fonts" and then changing the css and renaming the font-family property there or it's somewhat different procedure. I am not sure about it. Please help me.

share|improve this question

3 Answers 3

up vote 2 down vote accepted

To use a custom font, simply upload the font to your theme folder and then add a CSS @font-face declaration to the top of your theme's style.css file pointing to the new font:

@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');

You can then reference that custom font in other CSS styles, for example:

.entry-content { font-family: "CustomFont", sans-serif; }
share|improve this answer
I wouldn't recommend the use of truetype/ttf fonts –  Tom J Nowell Sep 5 at 17:05

I think its best to upload your font file to a web font generator.

After downloading the font kit, you can upload the unzipped folder to your themes root directory and rename it to fonts.

Then you can use the @font-face CSS from the style sheet in the kit to link to your font files in your parent or child themes style.css file.

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


After this, it is simply a matter of using the new font-family name in your CSS rules in your style.css file.

h1 {
    font-family: 'christmasevemedium';

Adding Google fonts is different and can be done using a variety of methods, PHP being the most efficient and flexible via your functions.php file:

add_action( 'wp_enqueue_scripts', 'wpsites_google_fonts' );
function wpsites_google_fonts() {
    wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:300,700', array(), CHILD_THEME_VERSION );
share|improve this answer

Since nowadays you can find the best fonts on Google-fonts (..and there's no better CDN than the google network), I think the best solution is to import it from them.

The best for doing this is adding a function that hooks to wp_head hook,

to functions.php add

function your_fonts() {
    wp_enqueue_style( 'opensans', "$protocol://fonts.googleapis.com/css?family=Open+Sans" );}
add_action( 'wp_enqueue_scripts', 'your_fonts' );//trigger your_fonts
share|improve this answer

Your Answer


