WordPress.org

Ready to get started?Download WordPress

Forums

Easy Google Fonts
[resolved] Possible to add other fonts? (15 posts)

  1. anefarious1
    Member
    Posted 7 months ago #

    Is it possible to add other fonts either directly to the plugin or by using a different method where this plugin can integrate it for use? I have 2 TTF files which I'd really like to use. Thanks

    http://wordpress.org/plugins/easy-google-fonts/

  2. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 7 months ago #

    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 support@titaniumthemes.com

  3. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 7 months ago #

    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' );
  4. anefarious1
    Member
    Posted 7 months ago #

    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!

  5. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 7 months ago #

    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 support@titaniumthemes.com

    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

  6. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 7 months ago #

    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

  7. anefarious1
    Member
    Posted 7 months ago #

    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!

  8. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 7 months ago #

    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

  9. anefarious1
    Member
    Posted 7 months ago #

    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' );

  10. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 7 months ago #

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

    Sunny

  11. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 7 months ago #

    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

  12. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 7 months ago #

    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.
  13. anefarious1
    Member
    Posted 7 months ago #

    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.

  14. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 6 months ago #

    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' );
  15. anefarious1
    Member
    Posted 6 months ago #

    This worked. Thanks so much

Reply

You must log in to post.

About this Plugin

About this Topic