Question 280968 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Implement Adobe Fonts in WordPress Neve theme

I’m attempting to implement an Adobe font family into the Neve theme for WP, to no avail. I followed the steps suggested by Adobe for transferring the font that I want to use and I have also installed the Adobe Fonts plugin. The font is recognised but still does not appear in any font menu for the theme.

I have also installed a custom CSS plugin and implemented the following code:

    <link rel="stylesheet" href="https://use.typekit.net/ati2qpt.css">

    function add_custom_font() { 
        $font_path_ttf = get_stylesheet_directory_uri() . '/fonts/zuume-cut, sans-serif';
        $extra_font_path_ttf = get_stylesheet_directory_uri() . '/fonts/zuume-cut, sans-serif';
        ?>
        <style type="text/css">

        @font-face {
            font-family: 'zuume-cut, sans-serif';
            src: url(<?php echo esc_url($font_path_ttf); ?>)  format('truetype');
        }

        @font-face {
            font-family: 'zuume-cut, sans-serif';
            src: url(<?php echo esc_url($extra_font_path_ttf); ?>)  format('truetype');
        }

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

    function add_custom_fonts($localized_data) {

        // First Font
        $localized_data['fonts']['Custom'][] = 'zuume-cut, sans-serif';
        // Second Font
        $localized_data['fonts']['Custom'][] = 'ExtraFontName';

        return $localized_data;
    }
    add_filter('neve_react_controls_localization', 'add_custom_fonts');

…this code is partly adapted from another source who asked a similar question here. Is there something I’m missing?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the detailed and considered reply. I haven't coded for years and feel like a bit of a novice coming back to it. From what I can gather, you're saying that it should cumulatively look something like this? -

    $font_path = get_stylesheet_directory_uri() . '/fonts/zuumeCut.woff2';


@font-face {
    font-family: 'zuume-cut';
    src: url(<?php echo esc_url($font_path); ?>)  format('woff2');
    font-weight: 400;
    font-style: normal;
}

  2. 0

    The $font_path_ttf and $extra_font_path_ttf dont’t refer to a proper font file.

    Provided, you’ve copied valid truetype files to your themes’s font directory

    They should look something like this:

        $font_path_ttf = get_stylesheet_directory_uri() . '/fonts/zuumeCut.ttf';

    $extra_font_path_ttf = get_stylesheet_directory_uri() . '/fonts/zuumeCutExtra.ttf';

    Besides, font-family property in a @font-face rule require only one name value:

        @font-face {
        font-family: 'zuume-cut';
        src: url(<?php echo esc_url($font_path_ttf); ?>)  format('truetype');
        font-weight: 400;
        font-style: normal;
    }

    You should also specify a font weight and style to map your font files to style variants.

    Since your typekit css contains woff2 files you should prefer them due to their superior file compression. So your code should look something like this:

        $font_path = get_stylesheet_directory_uri() . '/fonts/zuumeCut.woff2';


    @font-face {
        font-family: 'zuume-cut';
        src: url(<?php echo esc_url($font_path); ?>)  format('woff2');
        font-weight: 400;
        font-style: normal;
    }

    You should also remove the css <link> element – otherwise you might encounter conflicts between local and remote version.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search