提问人:Jim 提问时间:11/7/2023 更新时间:11/8/2023 访问量:36
在 Wordpress Neve 主题中实施 Adobe Fonts
Implement Adobe Fonts in Wordpress Neve theme
问:
我正在尝试将 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');
...这段代码部分改编自另一个来源,他在这里提出了类似的问题。我错过了什么吗?
答:
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;
}
评论