react-pdf/renderer自定义字体注册：寻求Poppins字体CDN链接

这里给你两个可行的解决方案：

方案1：使用直接的字体文件CDN链接 #

react-pdf需要直接指向字体文件（如woff/woff2）的URL，谷歌字体的常规CSS链接无法被解析，你可以用jsdelivr这类CDN获取Poppins的字体文件直接链接：

• 比如注册Poppins粗体：

const poppinsBold = 'https://cdn.jsdelivr.net/npm/typeface-poppins@1.1.13/files/poppins-latin-700.woff2';
Font.register({
  family: "Poppins",
  src: poppinsBold,
  fontWeight: "bold"
});

• 如果需要多个字重（比如常规、粗体、细体），可以在src里传数组，同时指定对应字重：

const poppinsRegular = 'https://cdn.jsdelivr.net/npm/typeface-poppins@1.1.13/files/poppins-latin-400.woff2';
const poppinsBold = 'https://cdn.jsdelivr.net/npm/typeface-poppins@1.1.13/files/poppins-latin-700.woff2';

Font.register({
  family: "Poppins",
  src: [
    {
      uri: poppinsRegular,
      fontWeight: "normal"
    },
    {
      uri: poppinsBold,
      fontWeight: "bold"
    }
  ]
});

方案2：本地引入字体文件 #

如果不想依赖CDN，直接把字体文件放到项目里更稳妥：

1. 从谷歌字体官网下载Poppins字体包，解压后取出你需要的字重文件（比如Poppins-Regular.woff2、Poppins-Bold.woff2）
2. 把这些文件放到项目的public/fonts目录下（没有就新建）
3. 用相对路径注册：

Font.register({
  family: "Poppins",
  src: [
    {
      uri: "/fonts/Poppins-Regular.woff2",
      fontWeight: "normal"
    },
    {
      uri: "/fonts/Poppins-Bold.woff2",
      fontWeight: "bold"
    }
  ]
});

注意：注册后使用字体时，要确保组件里的fontFamily设置为"Poppins"，同时对应好字重参数。

内容的提问来源于stack exchange，提问作者Ced D