如何获取指定Google Fonts用于本地离线使用（Metronic主题）

针对你使用Metronic主题时想要将Google Fonts（Poppins和Roboto指定字重）转为本地离线使用的需求，我分两步帮你搞定：

一、获取字体文件 #

你可以通过Google Fonts官方渠道下载所需字体：

• 分别搜索Poppins和Roboto，勾选你需要的字重：300（Light）、400（Regular）、500（Medium）、600（SemiBold）、700（Bold）
• 点击页面底部的"Download family"按钮，下载两个字体的压缩包
• 解压后，优先保留.woff2格式文件（兼容性好且体积小），把它们整理到项目的专属目录，比如assets/fonts/poppins/和assets/fonts/roboto/

二、替换原有代码 #

原来的WebFont.load脚本是通过CDN加载字体，现在我们用本地字体的@font-face规则替代，同时保留主题依赖的sessionStorage标记：

1. 添加本地字体的CSS规则 #

在页面<head>里（或者全局CSS文件中）插入以下代码：

/* Poppins 各字重字体声明 */
@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    src: url('../fonts/poppins/poppins-light.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    src: url('../fonts/poppins/poppins-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 500;
    src: url('../fonts/poppins/poppins-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 600;
    src: url('../fonts/poppins/poppins-semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    src: url('../fonts/poppins/poppins-bold.woff2') format('woff2');
}

/* Roboto 各字重字体声明 */
@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    src: url('../fonts/roboto/roboto-light.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: url('../fonts/roboto/roboto-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-weight: 500;
    src: url('../fonts/roboto/roboto-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-weight: 600;
    src: url('../fonts/roboto/roboto-semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: url('../fonts/roboto/roboto-bold.woff2') format('woff2');
}

/* 匹配Metronic主题的字体引用规则 */
body, .font-poppins {
    font-family: 'Poppins', sans-serif;
}
.font-roboto {
    font-family: 'Roboto', sans-serif;
}

注意：根据你实际的字体文件路径调整url()里的路径，确保CSS能正确加载字体。

2. 保留主题依赖的sessionStorage标记 #

原来的WebFont.load在字体加载完成后会设置sessionStorage.fonts = true，Metronic可能依赖这个标记避免重复加载。所以添加一段脚本模拟这个逻辑：

document.addEventListener('DOMContentLoaded', function() {
    sessionStorage.fonts = true;
});

3. 替换原有代码 #

移除原来的<script> WebFont.load(...) </script>，把上面的CSS和脚本放到<head>中，最终头部代码大概是这样：

<head>
    <!-- 本地字体样式 -->
    <style>
        /* 上面的@font-face和字体应用规则 */
    </style>
    <!-- 字体加载完成标记 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            sessionStorage.fonts = true;
        });
    </script>
    <!-- 其他Metronic主题头部代码 -->
</head>

验证 #

部署后，用浏览器开发者工具的Network面板检查是否加载了本地字体文件，同时查看sessionStorage里是否有fonts标记，确保主题样式正常渲染即可。

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