wordpress - 在 Gutenberg 编辑器中添加自定义字体(我网站的字体)

Question

我想使古腾堡编辑器适应我网站的外观，并将我的网络字体用于各种块元素。
我一直在查看插件的各种文件夹/CSS 文件，但没有找到任何有用的东西。
编辑器的字体定义在哪里？

谢谢你们!

大卫

Answer 1

我不知道是否有官方方法，但您可以为此创建一个小插件(准确地说是没有块的古腾堡块编辑器 Assets )。

创建一个名为 gutenbergfontchanger 的文件夹(或更好的名称)在/wp-content/plugins

中

添加名为 gutenbergfontchanger.php 的 PHP 文件使用与此类似的代码:

<?php
/*
Plugin Name: gutenbergfontchanger
*/

if (!function_exists('gutenbergfontchanger_editor_assets')) {
    function gutenbergfontchanger_editor_assets()
    {
        wp_enqueue_style(
            'gutenbergfontchanger-editor-style',
            plugins_url('editor.css', __FILE__),
            filemtime(plugin_dir_path(__FILE__) . 'editor.css')
        );
    }

    add_action('enqueue_block_editor_assets', 'gutenbergfontchanger_editor_assets');
}

添加一个名为 editor.css 的 CSS 文件包含您的字体样式:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600');

.editor-styles-wrapper, .editor-post-title__input {
  font-family: 'Source Sans Pro', sans-serif !important;
}

激活 WordPress 后端内的插件。