在古腾堡编辑器中添加自定义字体（我网站的字体）

Posted 2023-02-19

【中文标题】在古腾堡编辑器中添加自定义字体（我网站的字体）

【英文标题】：add custom fonts (my website's fonts) in Gutenberg editor

【发布时间】：2018-08-05 01:04:54

【问题描述】：

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

谢谢大家！

大卫

【问题讨论】：

我也在想同样的事情。

如果你能接受我的回答就好了:)

【参考方案1】：

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

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

添加一个名为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 后端激活插件。

【讨论】：

法比安您好！直到这个问题终于找到答案已经很长时间了。谢谢！会检查它，虽然我还不知道什么时候。 （必须看看古腾堡是否适用于我正在使用的主题......） - 来自拐角处的美好祝愿！

没问题 :) 我相信还有其他方法可以实现这一点，但对我来说效果很好。