在 Wordpress Neve 主题中实施 Adobe Fonts

Implement Adobe Fonts in Wordpress Neve theme

提问人:Jim 提问时间:11/7/2023 更新时间:11/8/2023 访问量:36

问:

我正在尝试将 Adob e 字体系列实施到 WP 的 Neve 主题中,但无济于事。我按照Adobe建议的步骤转移了我想使用的字体,并且还安装了Adobe Fonts插件。该字体已被识别,但仍未显示在主题的任何字体菜单中。

我还安装了一个自定义CSS插件并实现了以下代码:

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

...这段代码部分改编自另一个来源,他在这里提出了类似的问题。我错过了什么吗?

CSS WordPress 字体

评论


答:

0赞 herrstrietzel 11/7/2023 #1

和 不要引用正确的字体文件。$font_path_ttf$extra_font_path_ttf

前提是您已将有效的 truetype 文件复制到主题的字体目录中

它们应如下所示:

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

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

此外,规则中的属性只需要一个名称值:font-family@font-face

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

您还应该指定字体粗细和样式,以将字体文件映射到样式变体。

由于您的 typekit css 包含 woff2 文件,您应该更喜欢它们,因为它们具有出色的文件压缩功能。因此,您的代码应如下所示:

    $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;
    } 

您还应该删除 css 元素 - 否则您可能会遇到本地和远程版本之间的冲突。<link>

0赞 Jim 11/8/2023 #2

据我所知,你是说它应该累积起来看起来像这样?-

$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;
}