Possible to add other fonts?

Hi anefarious1,

There is a way to integrate the ttf fonts in the customizer using WordPress filters (You would need to know php to accomplish this step). You would have to declare the @font-face yourself in your CSS stylesheet though. Here is a way to add an example font called ‘Test Font’:

// Always prefix your functions to avoid naming conflicts
function pfx_add_my_custom_fonts( $fonts ){
    // Add your custom fonts below
    $fonts['Test Font'] = array( 'weights' => array( '400', '400italic', '700', '700italic ) );
    $fonts['Another Font'] = array( 'weights' => array( '400', '400italic', '700', '700italic ) );
}
add_filter( 'tt_font_get_default_fonts', 'pfx_add_my_custom_fonts' );

By doing this your custom fonts will be available under default fonts in the customizer.

Hope that helps

Sunny

P.S. We are adding features to this plugin and are looking for Beta testers, would you be interested in this? If so shoot me a mail at [email protected]

You could also add the font face using a WordPress actions e.g.

function  pfx_add_custom_font_faces(){
    ?>
    <style type="text/css">
    @font-face {
        font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('webfont.woff') format('woff'), /* Modern Browsers */
             url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}
    </style>
    <?php
}
add_action( 'wp_head', 'pfx_add_custom_font_faces' );

I have some other sites I could beta test with so I will email you for sure. Regarding those two methods for adding a font, which one is easier? I am not really good at php. I have many customizations in my css style sheet but I don’t think there is any php. Can I really add the following directly to my custom css?

$fonts[‘Test Font’] = array( ‘weights’ => array( ‘400’, ‘400italic’, ‘700’, ‘700italic ) );
$fonts[‘Another Font’] = array( ‘weights’ => array( ‘400’, ‘400italic’, ‘700’, ‘700italic ) );
}
add_filter( ‘tt_font_get_default_fonts’, ‘pfx_add_my_custom_fonts’ )

Are there any other steps in the first method? The second method also looks interesting but where would that code go? Which file exactly? I would also need to upload the font directly to my cpanel file manager right? Thanks!

Hi anefarious1,

They are not two separate methods, they are both required to accomplish what you want. You would have to add the code above in your themes functions.php file and upload the font files via cpanel directly or ftp. If you get really stuck just shoot me an e-mail [email protected]

Initially this plugin was only designed for google fonts but I will see if we can put this feature (Uploading your own fonts) on the roadmap for a future release.

Sunny

Hi anefarious,
Here are some step by step instructions for you. For this scenerio I am going to add two fonts: Test Font and Another Font

Upload your fonts manually:

1. Create a folder in your theme directory called fonts
2. Upload your TTF files in this directory

Add these fonts to the array:

1. Copy and paste the code below into your functions.php file (change the weight values accordingly):

// Always prefix your functions to avoid naming conflicts
function pfx_add_my_custom_fonts( $fonts ) {
    // Add your custom fonts below
    $fonts['Test Font'] = array( 'weights' => array( '400', '400italic', '700', '700italic ) );
    $fonts['Another Font'] = array( 'weights' => array( '400', '400italic', '700', '700italic ) );

}
add_filter( 'tt_font_get_default_fonts', 'pfx_add_my_custom_fonts' );

Tell WordPress where your font files are:

1. Copy and paste the code below into your functions.php file

function pfx_add_custom_font_faces(){
    ?>
    <style type="text/css">
        @font-face {
            font-family: 'Test Font';
            src: url('<?php echo get_template_directory_uri(); ?>/fonts/test-font-filename.ttf')  format('truetype');
        }

        @font-face {
            font-family: 'Another Font';
            src: url('<?php echo get_template_directory_uri(); ?>/fonts/another-font-filename.ttf')  format('truetype');
        }
    </style>
    <?php
}
add_action( 'wp_head', 'pfx_add_custom_font_faces' );

If all of the steps above have been followed correctly then you should see Test Font and Another Font in the Default Fonts section of the customizer.

I hope that has made it clearer for you.

Sunny

Your detailed instructions are great. However, I get the following error:

Parse error: syntax error, unexpected ‘tt_font_get_default_fonts’ (T_STRING), expecting ‘)’ in /home3/XXX/public_html/XXXXXXX.com/wp-content/themes/classic-swan/functions.php on line 466 (in bold)

Here is my code which I combined into the theme’s function.php file:

// Always prefix your functions to avoid naming conflicts
function pfx_add_my_custom_fonts( $fonts ){
// Add your custom fonts below
$fonts[‘eraser’] = array( ‘weights’ => array( ‘400’, ‘400italic’, ‘700’, ‘700italic ) );
}
add_filter( ‘tt_font_get_default_fonts’, ‘pfx_add_my_custom_fonts’ );

function pfx_add_custom_font_faces(){
?>
<style type=”text/css”>
@font-face {
font-family: ‘eraser’;
src: url(‘<?php echo get_template_directory_uri(); ?>/fonts/eraser.ttf’) format(‘truetype’);
}
</style>
<?php
}
add_action( ‘wp_head’, ‘pfx_add_custom_font_faces’ );

I didn’t do anything with the CSS stylesheet just uploaded the ttf file to the fonts folder in the theme directory and added the above to fuctions.php file. Any idea what’s wrong? Thanks!

Yes I know what is wrong, the weights array is missing a closing string on the 700 italic value.
Copy and paste this function to replace pfx_add_my_custom_fonts():

function pfx_add_my_custom_fonts( $fonts ){
// Add your custom fonts below
$fonts['eraser'] = array( 'weights' => array( '400', '400italic', '700', '700italic' ) );
}
add_filter( 'tt_font_get_default_fonts', 'pfx_add_my_custom_fonts' );

Sunny

Sorry Sunny but I copied and pasted it and got the same result. This is what I used:

// Always prefix your functions to avoid naming conflicts
function pfx_add_my_custom_fonts( $fonts ){
// Add your custom fonts below
$fonts[‘eraser’] = array( ‘weights’ => array( ‘400’, ‘400italic’, ‘700’, ‘700italic ) );
}
add_filter( ‘tt_font_get_default_fonts’, ‘pfx_add_my_custom_fonts’ );

function pfx_add_my_custom_fonts( $fonts ){
// Add your custom fonts below
$fonts[‘eraser’] = array( ‘weights’ => array( ‘400’, ‘400italic’, ‘700’, ‘700italic’ ) );
}
add_filter( ‘tt_font_get_default_fonts’, ‘pfx_add_my_custom_fonts’ );

You have used the same function twice? Delete the top one.

Sunny

To make it 100% clear for you. Do the following:

1. Delete any changes that you have put in your functions.php file with these functions.
2. Copy and paste the following in there:

function pfx_add_my_custom_fonts( $fonts ){
    // Add your custom fonts below
    $fonts['eraser'] = array( 'weights' => array( '400', '400italic', '700', '700italic' ) );
}
add_filter( 'tt_font_get_default_fonts', 'pfx_add_my_custom_fonts' );

function pfx_add_custom_font_faces(){
    ?>
    <style type="text/css">
        @font-face {
            font-family: 'eraser';
            src: url('<?php echo get_template_directory_uri(); ?>/fonts/eraser.ttf')  format('truetype');
        }
    </style>
    <?php
}
add_action( 'wp_head', 'pfx_add_custom_font_faces' );

Hope that has made it clearer for you.

Sunny

By the way once you have done this you need to refresh the transients. To do this:

1. In your WordPress Admin Area go to: Settings > Google Fonts and click the Advanced Tab
2. Click the Save Google API Key button.

Ok that worked, no errors. I refreshed the Google API Key although the field is blank, I don’t see any key filled in.

When I go to the customize section I don’t see the new font however. What do you mean default font section? There is “theme default’ then something called “Standard Web Fonts” which is bold and not clickable and then Google Fonts in bold and all the original fonts below it. No Eraser font is listed.

Hi James,
Try this instead and let me know if it works:

function pfx_add_my_custom_fonts( $fonts ){

    $font_weights = array( '400', '400italic', '700', '700italic' );
    $urls = array();

    foreach ( $font_weights as $variant ) {
        $urls[ $variant ] = get_template_directory_uri() . '/fonts/Eraser.ttf';
    }

    // Add your custom fonts below
    $atts = array(
        'name'         => 'Eraser',
        'font_type'    => 'default',
        'font_weights' => $font_weights,
        'files'        => array(),
        'urls'         => $urls
    );

    $fonts['eraser'] = $atts;

    return $fonts;
}
add_filter( 'tt_font_get_default_fonts', 'pfx_add_my_custom_fonts', 0 );

function pfx_add_custom_font_faces(){
    ?>
    <style type="text/css">
        @font-face {
            font-family: 'Eraser';
            src: url('<?php echo get_template_directory_uri(); ?>/fonts/Eraser.ttf')  format('truetype');
        }

    </style>
    <?php
}
add_action( 'wp_head', 'pfx_add_custom_font_faces' );

This worked. Thanks so much