如何让我的字体显示在我的网站上？答案

【问题标题】：How do I get my font to show up on my WebSite?如何让我的字体显示在我的网站上？
【发布时间】：2021-03-12 12:50:15
【问题描述】：

所以我真的是编程新手，但我无法理解为什么我的文本没有以自定义字体显示。它显示白色斜体文本，但我无法让字体工作。感谢您的帮助！

<html>
    <head>
        <title>Webpage</title>
        <style>
            @font-face
            {
                font-family: 'my font';
                src: url(C:\Users\theuser\Font\My Custom Font.woff2) format('woff2'),
                url(C:\Users\theuser\Font\My Custom Font.ttf) format('truetype'),
            }
            h2
            {
                font-family: 'my font';
                color: white;
                font-style: italic;
            }
        </style>
        <h2>Header text</h2>
    </head>
    <body>
        <p style="color:white;">Font testing</p>
        <body bgcolor="#000000">
    </body>
</html>```

【问题讨论】：

首先，字体的路径：它不应该是以 C:\ 开头的东西，因为这在 linux/macOS 上不起作用，相反你需要一个以 ./ 开头的 URL或/（分别是http服务器的这个文件夹或根文件夹）。我还强烈建议您不要使用服务器上的字体，而是使用 google fonts 中的字体，它非常易于使用并且对我来说效果很好。
谢谢！我会试一试谷歌字体，但到目前为止我的字体似乎正在工作，所以我想我不会篡改它。不过还是谢谢！

标签： html css fonts

【解决方案1】：

您在正确的轨道上，但您无法直接从本地机器副本导入字体我的自定义字体从您保存的位置并在您的项目目录中创建一个文件夹名称字体，然后在项目的根目录中添加我的自定义字体

例如：

myProject
| - js
| - img
| - Fonts <-- here
| - index.html

然后在您的 index.html 中，您可以将它们导入到您的项目中

@font-face {
  font-family: 'MyWebFont';
  src:  url('./Fonts/My Custom Font.woff2') format('woff2'),
        url('./Fonts/My Custom Font.woff') format('woff');
}

【讨论】：