如何在WordPress中使用Google字体

1. 先说为啥要用Google字体。WordPress自带的字体就那么几种，看久了总觉得单调。Google字体库大得跟超市似的，随便挑个Roboto或者Open Sans，整个网站气质立马提升。不过得注意，别乱用，字体加载多了拖慢速度，用户跑了可不好玩。

2. 第一步，找字体。打开Google Fonts官网（fonts.google.com），选个喜欢的，比如我最近用"Poppins"。点进去，选字重（比如400正常、700粗体），右边会生成代码。复制那段，长这样：

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

   但别直接扔到WordPress头部！会搞乱主题更新。

3. 正确做法是扔进functions.php。打开主题文件，找到functions.php，加段代码：

   function add_google_fonts() {
   wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap', array(), null );
   }
   add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

   这样WordPress会乖乖排队加载，不会冲突。注意那个array()是依赖项，一般留空就行，null表示不版本控制。

4. 接着在CSS里调用。比如想改全站正文字体，到自定义izer的额外CSS里写：

   body {
   font-family: 'Poppins', sans-serif;
   font-weight: 400;
   }
   h1 {
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
   }

   sans-serif是后备字体，万一Google字体加载失败，至少有个像样的替补。

5. 性能问题不能忘。Google字体是外部资源，可能拖慢速度。可以用preload预加载，在functions里加这句：

   add_filter( 'wp_resource_hints', function( $urls, $relation_type ) {
   if ( 'preconnect' === $relation_type ) {
       $urls[] = array(
           'href' => 'https://fonts.gstatic.com',
           'crossorigin',
       );
   }
   return $urls;
   }, 10, 2 );

   这样浏览器会提前连接字体服务器，加载更快点。

6. 最后唠叨一句：别贪多！一个网站顶多用两三种字体，不然看起来像字体展览会。而且中文字体包太大，尽量用英文字体，中文fallback到系统字体。折腾完记得用GTmetrix测测速度，万一慢了还得优化。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。