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

时间:2018-02-25 13:15:36

标签: wordpress webfonts wordpress-gutenberg

我想让gutenberg编辑器适应我网站的外观,并使用我的网络字体来处理各种块元素。 我一直在查看插件的各种文件夹/ CSS文件,但没有找到任何有用的东西。 编辑器的字体定义在哪里?

谢谢大家!

大卫

1 个答案:

答案 0 :(得分:2)

我不知道是否有正式的方法,但是您可以为此创建一个小插件(准确地说是Gutenberg块编辑器资源,没有块)。

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

  2. 添加一个名为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');
}
  1. 添加一个名为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;
}
  1. 激活您的WordPress后端内部的插件。