WordPress添加自定义字体:【纯代码+插件】两种方式
方法1,纯代码的方式添加,适合不喜欢用插件的同学:
//1,允许在WordPress后台media媒体库上传字体,将下面代码添加到主题的functions.php class FJJ_SUPPORT_TTF_MEDIA{ public function __construct(){ add_filter('upload_mimes', array($this,'fjj_upload_media_mimes')); add_filter( 'wp_check_filetype_and_ext', array($this,'fjj_check_types'), 10, 4 ); } function fjj_upload_media_mimes($fjj_mimes) { $fjj_mimes['ttf'] = 'application/x-font-ttf'; $fjj_mimes['otf'] = 'application/x-font-otf'; $fjj_mimes['eot'] = 'application/x-font-eot'; $fjj_mimes['woff'] = 'application/x-font-woff'; $fjj_mimes['woff2'] = 'application/x-font-woff2'; return $fjj_mimes; } function fjj_check_types( $checked, $file, $filename, $mimes ) { if ( ! $checked['type'] ) { $check_filetype = wp_check_filetype( $filename, $mimes ); $ext = $check_filetype['ext']; $type = $check_filetype['type']; $proper_filename = $filename; $checked = compact( 'ext','type','proper_filename' ); } return $checked; } } new FJJ_SUPPORT_TTF_MEDIA(); //2,将下载好的字体,后缀是ttf格式,上传到WordPress后台media媒体库,上传成功后,获取到字体的文件路径, //类似:http://127.0.0.1/wp-content/uploads/2023/09/Super-Dream.ttf //3,将下面代码添加到主题的style.css: @font-face { font-family: 'SuperDream'; /* 字体名称 */ src: url('http://127.0.0.1/wp-content/uploads/2023/09/Super-Dream.ttf') format('truetype'); /* 字体文件的路径和格式 */ font-weight: normal; /* 字体的重量 */ font-style: normal; /* 字体的样式 */ } //4,在WordPress前端调用新字体: h1.product_title.entry-title { font-family: SuperDream; }
方法2,直接使用插件,跳过方法1的1,2,3步骤:https://wordpress.org/plugins/custom-fonts/