self-hosting fonts

options
self-hosting fonts written Nov 2, 2018 0:01:25 GMT
pronounsany pronouns
270written posts
forteearned bits
offlinecurrently
forte
Senior Member
forte Avatar
Okay so. I think I may be the biggest idiot ever for being unable to do this, but I need help figuring out how to host my own font. Although Google fonts are great, I've gone through their entire list of fonts and none of them seemed just right for what I wanted. And yes, I am super nit-picky when it comes to stuff like this.

So I found a font I really liked, downloaded it and used fontsquirrel's webfont generator to get .eot, .svg, .ttf, .woff, and .woff2 versions of it. Originally, I just downloaded .woff and .woff2, but ended up getting the rest after I wasn't able to get it to work... But anyways.

In my local styles.css folder, I put this:@font-face {
   font-family: 'titlefont';
   src: url('titlefont-webfont.eot');
   src: url('titlefont-webfont.eot?#iefix') format('embedded-opentype'),
        url('titlefont-webfont.woff2') format('woff2'),
        url('titlefont-webfont.woff') format('woff'),
        url('titlefont-webfont.ttf') format('truetype'),
        url('titlefont-webfont.svg#titlefont') format('svg');
   font-weight: normal;
   font-style: normal;
}

h1 {
   font-family: 'titlefont', cursive;
}

But when I actually try to implement it onto my page, it always shows up as the browser's default cursive font when I preview it locally.

I checked the paths and made sure that they were correct and that I wasn't getting any errors using inspect, but it doesn't seem to want to work for me... Any idea what I'm wonking up?
options
self-hosting fonts written Nov 2, 2018 0:51:06 GMT
phantom of the black parade
pronounsshe / her pronouns
4,235written posts
Kuroyaearned bits
offlinecurrently
Kuroya
Part of the Furniture
Kuroya Avatar
at this, the world's end, do we cast off tomorrow~!
i am not sure what you're doing wrong here (it might be that you don't have a full url anywhere or that you're trying to dump the fonts all into one thing?) but here's the css i use for when i wanna pull out a couple of the old batim fonts for a template i'm actively using.


@font-face {
 font-family: 'DK Downward Fall';
 src: url('https://static.tumblr.com/1swrhin/ahnp89nwk/dk_downward_fall.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'Caviar Dreams';
 src: url('https://static.tumblr.com/1swrhin/pC6p89o50/caviardreams.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}


options
self-hosting fonts written Nov 2, 2018 1:24:55 GMT
phantom of the black parade
pronounsshe / her pronouns
4,235written posts
Kuroyaearned bits
offlinecurrently
Kuroya
Part of the Furniture
Kuroya Avatar
at this, the world's end, do we cast off tomorrow~!
local files always get kind of iffy for me when i reference them.

if that's not the issue though, maybe it's just how you're pulling the urls for the source? try just the ttf file (which is in the format there that i have since imo it works) and go from there?

i only recently learned how to install fonts myself so i am not a good troubleshooter here


options
self-hosting fonts written Nov 2, 2018 1:45:56 GMT via mobile
pronounsno preference /o/
298written posts
offlinecurrently
k̾u̾r̾a̾ 💩
Senior Member
k̾u̾r̾a̾ 💩 Avatar
perhaps i am faint glimmer —
how are you implementing this webpage? is this for a skin, or are you making a website (and if you are making a website, how are you hosting it? or are you just tossing things in folders and running it locally?)

the first thing that jumps out at me is that your font links are not actually links, they're relative file paths. if you're hosting it on fontsquirrel, then they should start with http://. if you're only testing a website locally or if it's uploaded to your webhost, then the file path might be wrong, so double check in inspect element where the font links are going where they're supposed to be going. you might need something like /fonts/fontnams.ttf

without a page to interact with, it's really hard to pinpoint what the actual problem is tbh
last edit on Nov 2, 2018 3:28:32 GMT by k̾u̾r̾a̾ 💩
options
self-hosting fonts written Nov 2, 2018 4:58:08 GMT
pronounsany pronouns
270written posts
forteearned bits
offlinecurrently
forte
Senior Member
forte Avatar
&

jdlashflashdfadf bless you both, you're angels.

Turns out I'm just a grade A dumbass, tho... The font I picked didn't actually have any lowercase letters and I just kinda assumed that lowercase and uppercase letters would default to the same thing... So all I needed to do was make the content... caps... RIP.

I am... so sorry... and embarrassed... v embarrassed.



But to answer your question, I've never actually made a skin before, so I'm kinda just coding one as just a Normal Webpage™ from scratch (all files are local). After I actually finish, I'll compare the classes and whatnot and try to figure out how to actually turn it into a skin...

At least, that's the goal. We'll see how it goes... L-LOL...
last edit on Nov 2, 2018 5:07:26 GMT by forte
options
self-hosting fonts written Nov 18, 2018 23:08:35 GMT
3,084written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.