Using custom fonts not from a web host?

Help
1

(sorry! i accidentally deleted my post when i meant to edit!!

by title i mean-- using custom fonts in my folders on my PC instead of those ones found on Google Fonts. to clarify first, it is a font i can use- i purchased it and it allows this kind of use!

I generally understand what to do, i think. I read the narrat documents page for custom fonts. and i feel like i get it? also read some other articles too for clarity and it all looked correct. another thing is i saw in the narrat doc that the font names were written with apostrophes around them like ‘redeemgold’ but i also saw on sites like w3school that there wasnt any. and i notice that when i try to use apostrophes is turns into quotes so… perhaps that is an issue? not sure which thing is right.

i have it set up as i saw,

@font-face {
  /* reg */
  font-family: "redeemgold";
  font-style: normal;
  font-weight: normal;
  src: url("redeemgold.woff");
}

and then for the bit i wanted to change

.dialog-title {
  font-size: 18px;
  font-family: "redeemgold";
}
1 Like
2

Step one is you gotta grab that font. Let’s assume you have the fonts in /public/fonts/ in your folder:

Screenshot 2023-07-23 at 10.50.19 PM

Then, you want to reference where that font is:

@font-face {
  font-family: "Constantine";
  src: url("/fonts/Constantine.ttf") format("truetype");
}

Except you want to use format("woff") if it’s a .woff file, etc. (Practically you want to use a web font like .woff/.woff2 because they’re smaller.)

That font-face is then used like:

.button,
.tab-title,
.title {
  font-family: "Constantine";
  text-transform: uppercase;
  font-weight: normal;
}
3

thanks, this worked ^^ prior i also realized i had missed the folder path in that original code, and i had tried it before this but, had it as public/fonts/redeemgold.woff and that didn’t work…!

4

i am having the same issue again though as i add another font, that will be all of the other general text of the game-- just copied the same thing as before- changing the paths to fit of course. was sure if the new font-face should be seperate from the other but, either way it didnt seem to change anything. is there something else i should be doing for a second font?

as my code appears

@font-face {
  font-family: "Match";
  src: url("/fonts/Match.tff") format("truetype");
}

.dialog-text {
  color: white;
  font-size: 14px;
  font-family: "Match";
  font-weight: normal;
}
5

A few possible things:

  • the font name you put in font-family has to match the actual name of the font, which isn’t necessarily the same thing as the file name. If you open the font on your pc the windows font viewer thing shows you its actual name somewhere
  • are you sure it’s truetype and not woff2 or something? I don’t know how browsers behave if you specify the format wrong
  • also are you sure the font is actually applied to what you’re looking at? In the game if you right click on text and click inspect, you can see the text element in the devtools inspector menu. On the right side of those devtools it shows which css rules are being applied to it. You can check that it does have the font family you provided
  • you can also check in the network tab that the font file loaded properly
  • also I think we’re supposed to specify font-weight and font-style when loading fonts. I’m not sure how it behaves when we don’t. I’ve noticed fonts before just not appearing when they’re being displayed at a different weight than the ones provided by the font (bold/not bold)

Otherwise yeah web fonts are a bit awkward to setup sometimes, you can look at web font guides online, narrat doesn’t do anything special here it’s just standard css features

6

thanks for the suggestions-- not home atm but i will try them asap. the file name may well be the issue. i didnt think about it as i changed “redeemgold” from “RedeemGold”, and i did in fact change “Match” from “Match 7p” as i wanted to get rid of the space. i will also make sure about the other things, but the mention of file name immediately made me think about that.

7

Yeah I added a font to my game yesterday and did something similar, it wasn’t working until I used specifically the name that’s in the font itself

1 Like
8

can confirm, the file name was it. i wanted to see at all if i could change that name in the font anyways as i like to avoid spaces in anything w coding and was able to use a program called ‘fontforge’ to edit this, which was handy.