Only two out of the three fonts listed in <style> show up

I'm having issues with fonts. I was doing some tests with HTML, and I had three fonts listed. all three are listed exactly the same, as you can see below:

<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>

however, out of the three fonts, only romantics and starlight show up when I insert them into an element. I don't know what I'm doing wrong.

I've not made any typos when inserting the ktegaki font into any elements. at first I suspected that the dropbox link to the font was broken, that it got deleted, but no—as soon as I copied and pasted it into my browser's search tab and pressed enter, it downloaded the font to the device, so no, it's not an issue with the source.

I tried putting " or ' symbols around the url. Nothing changed.

I was also having an issue with common fonts such as Epilogue or DM Sans, both available on Google Fonts. Both of these fonts were the first in the list. I assumed it somehow was an issue with the font placements, but after swapping those fonts (and the ktegaki font) around, there was still no change. I genuinely have no clue what to do here. It doesn't seem like a browser issue either, it seems like the problem is in the code.

EDIT: by the way, this is how the fonts are inserted into the elements right now (the elements names are edited, they are named differently in the original code):

#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; 
}

as mentioned above, only the Romantics and Starlight fonts appear. the Ktegaki font refuses to show up no matter what I do.

EDIT 2: here is the code that I used after the tag:

<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>

it's a scrollbox; the ktegaki font was supposed to show up as the multiple "text"s after the second
.

EDIT 3: just put the code through a validator and turns out that the < /p> end tag after the multiple "text"s (which is where the ktegaki font should be showing up) is getting ignored because it's unexpected...??? very weird. I don't know why it's getting ignored too, it doesn't seem unexpected to me.

EDIT 4: I tried removing the br elements, no difference. Font still doesn't show up.

I suspect it's related to the <p> tag closing early because there is already a block level element there (the <div> tag). See here:

"Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag. See "Tag omission" below."

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

You could change the name3 div to a <span> to resolve (although when I put your code in jsfiddle it seems to work as is FYI).