自定义字体未显示在我的网络预览中答案

【问题标题】：Custom font not showing on my web preview自定义字体未显示在我的网络预览中
【发布时间】：2019-11-09 04:14:29
【问题描述】：

问题：
- 从字体松鼠下载的 webfontkit
- 将字体添加到具有字体系列、src、字体粗细、字体样式的新 css 文件
- 试图将它应用到我的标题
- 检查我的网络浏览器，字体更改为默认字体，但不是我想要的自定义字体

我尝试过的事情
- 重新检查了我的代码几次
- 使用其他格式 .ttf 和 .svg 再次下载 webfontkit index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags always come first-->
    <meta charset="utf-8" />
    <meta name= "viewport" content="width=device-width, initial-scale=1" />

    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <!-- endbuild -->

    <title>DEVEDAN: A Digital Marketing Agency</title>
</head>

<body>
<!--I hid the Navbar code because it was irrelevant-->

<!--WEBSITE CONTENT-->      
    <!-- Page content holder -->
<div class="page-content p-5" id="content">

    <!-- Heading -->
    <h2 class="display-4 text-white">DEVEDAN</h2>
    <p class="lead text-white mb-0">Develop your business w/ Edson & Angelika</p>
    <div class="separator"></div> 

</div>
    <!--I hid the jscode because it was irrelevant-->
</body>
</html>

fonts.css 文件

@font-face {
    font-family: 'siffonOutline';
    src: url('fonts/siffonoutline-webfont.eot');
    src: url('fonts/siffonoutline-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/siffonoutline-webfont.woff2') format('woff2'),
         url('fonts/siffonoutline-webfont.woff') format('woff'),
         url('fonts/siffonoutline-webfont.ttf') format('truetype'),
         url('fonts/siffonoutline-webfont.svg#sifonnbasic_outline') format('svg');
    font-weight: normal;
    font-style: normal;
}

styles.css 文件

/*Fonts*/
@import "fonts.css";

/*NAVBAR*/
.vertical-nav {
    min-width: 17rem;
    width: 17rem;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.4s;
}

.page-content {
    width: calc(100% - 17rem);
    margin-left: 17rem;
    transition: all 0.4s;
}

/*WEBSITE CONTENT*/
h2 {
    font-family: 'siffonOutline';
}

body {
    background: #599fd9;
    background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
    background: linear-gradient(to right, #599fd9, #c2e59c);
    min-height: 100vh;
    overflow-x: hidden;
}

.separator {
    margin: 3rem 0;
    border-bottom: 1px dashed #fff;
}

点击链接查看我的代码输出：https://i.stack.imgur.com/ePLCh.png]

【问题讨论】：

你检查过@font-face 路径吗？这个字体文件夹正确吗？

标签： html css twitter-bootstrap custom-font

【解决方案1】：

检查@import 路径是否正确

@import "fonts.css";

【讨论】：