CodeIgniter项目添加自定义Poppins字体后无法生效如何解决？

核心问题1：字重不匹配 #

你在@font-face中声明的Poppins字体仅对应font-weight: 900（黑粗字重），但body样式中设置的是font-weight: 300（轻量字重），浏览器找不到对应300字重的Poppins字体文件，会直接降级使用默认的sans-serif字体。
解决方式二选一：

• 下载对应300字重的Poppins字体文件，新增对应字重的@font-face规则
• 直接将body的font-weight属性改为900，使用你已经引入的900字重字体

核心问题2：路径不匹配 #

你提到字体文件存放在项目的font文件夹中，但代码中写的路径前缀是../font-awesome/fonts/，路径不匹配会导致浏览器加载字体文件时返回404错误。
解决方法：

• 先确认你的项目资源目录结构，假设结构如下：

  项目根目录/
    ├─ asset/
    │   └─ style.css
    └─ font/
        ├─ Poppins-Black.eot
        ├─ Poppins-Black.woff
        └─ Poppins-Black.ttf
  

  你需要将所有字体路径的前缀替换为../font/，和实际存放路径对齐
• 可以打开浏览器开发者工具的「网络」面板，筛选「字体」类请求，确认字体文件是否加载失败，核对实际请求路径和存放路径是否一致

次要问题：local规则写法错误 #

local()内需要填写用户本地安装的字体名称，不是本地文件路径，你写的local('../font-awesome/fonts/Poppins Black')是无效规则，不过这个问题不会影响远程字体加载，仅会跳过本地字体匹配逻辑，建议修改为local('Poppins Black')即可。

修正后参考代码 #

@font-face {
    font-family: 'Poppins';
    src: url('../font/Poppins-Black.eot');
    src: local('Poppins Black'), local('Poppins-Black'),
        url('../font/Poppins-Black.eot?#iefix') format('embedded-opentype'),
        url('../font/Poppins-Black.woff') format('woff'),
        url('../font/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
/* 如果需要使用300字重，新增对应规则，前提是已下载对应字重的字体文件 */
@font-face {
    font-family: 'Poppins';
    src: url('../font/Poppins-Light.eot');
    src: local('Poppins Light'), local('Poppins-Light'),
        url('../font/Poppins-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/Poppins-Light.woff') format('woff'),
        url('../font/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #888;
    line-height: normal;
    text-align: center;
}

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