Issue
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.
Solution
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).
Answered By - Justin Carter
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.