Html 在<；style&>中列出的三种字体中，只有两种显示

我对字体有问题. 我在做一些关于超文本标记语言的测试，我列出了三种字体.这三个列表完全相同，如下所示:

<style>
 
   @font-face {
    font-family: 'ktegaki';
    src: url(https://dl.dropbox.com/s/0v89ncr2notdcgc/KTEGAKI.ttf);
}
 
  @font-face {
    font-family: 'starlight';
    src: url(https://dl.dropbox.com/s/cfcp07kvx3qut4s/starlight.ttf);
}
 
  @font-face {
    font-family: 'romantics';
    src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
}
</style>

然而，在三种字体中，当我将它们插入到元素中时，只有浪漫和星光显示出来.我不知道我做错了什么.

我没有任何错别字时插入ktegaki字体到任何元素.起初我怀疑dropbox链接到字体被打破了，它被删除了，但没有-只要我复制并粘贴到我的浏览器的搜索选项卡，并按下回车键，它就下载了字体到设备，所以没有，这不是源代码的问题.

我试着在URL周围加了"或"符号.什么都没变.

我也有一个常见的字体，如尾声或DM Sans的问题，都可以在谷歌字体.这两种字体都是列表中的第一个.我以为这是字体位置的问题，但是在交换了这些字体(和ktegaki字体)之后，仍然没有变化.我真的不知道该怎么办.这看起来也不像是浏览器的问题，似乎问题出在代码中.

编辑:顺便说一句，这就是字体现在插入元素的方式(元素名称被编辑，它们在原始代码中命名不同):

#name1 {
width:100px;
height:100px;
background: white;
border: 3px double #ccc;
border-radius: 0px;
padding: 6px;
overflow: auto;
font-family: Ktegaki;
font-size:10px;
color: #000;
}
 
#name2 {
background: #ccc;
border: 1px solid #000;
border-radius: 7px;
padding: 2px;
color: #000;
font-size: 7px;
font-family: Starlight;
 
}
 
#name3 { 
font-family: Romantics;
font-style: bold;
font-size: 2.5em; 
letter-spacing: 2px;
text-shadow: -1px 0 #fff, 0 1px #000, 1px 0 #000, 0 -1px #fff, 0 0; 
color: #b84154; 
}

如上所述，只有Romantics和Starlight字体会出现.无论我做什么，Ktegaki字体都拒绝显示.

编辑2:以下是我使用的after个标签的代码:

<div id="name1">
<p><div id="name3">Text here</div><mark id="name2">Text here</mark><br><br> text text text text text text text text text text text text text text text </p>
</div>

这是一个滚动框；ktegaki字体应该在第二个
之后显示为多个"文本"S.

编辑3:只需将代码放入验证器，结果发现多重"Text"S(这是ktegaki字体应该显示的位置)后面的&lt；/p&gt；结束标记被忽略了，因为它是意外的…？非常奇怪.我不知道为什么它也被忽视了，这对我来说似乎并不意外.

编辑4:我试着删除了br元素，没有区别.字体仍未显示.