How to use @font-face with custom fonts in Niantic Studio?

[Herman_Ptacnik]

Hi, I’m trying to load a custom font into my 8th Wall (Niantic Studio) game.
Here’s what I tried in my CSS:

@font-face {
  font-family: 'UnitedSans';
  src: url('https://static.8thwall.app/assets/Fonts/UnitedSansReg-Bold.otf') format('opentype');
}

#final-score-text {
  position: absolute; /* Positions the image relative to the container */
  top: 40%; /* Places the image 10% from the bottom of the container */
  left: 50%; /* Centers the image horizontally */
  transform: translateX(-50%); /* Adjusts to make sure the image is perfectly centered */
  font-size: 4rem;
  font-family: 'UnitedSans', sans-serif;
  justify-content: center;
  text-align: center;
  width: 100%; /* 50% of the viewport width */
  height: auto; /* Keeps the aspect ratio */
  z-index: 3;
  color: white;
}

But when I run the game, the custom font doesn’t seem to apply — it just falls back to the default sans-serif font.

Is there a specific method for loading custom fonts in Niantic Studio?
Do I need to host the font differently or load it manually through JavaScript?

Thanks in advance!

[GeorgeButler]

You just need to load the custom font file .TTF into your assets folder and it will automatically get converted to a .font8 file. You can then use that!

[Herman_Ptacnik]

I’ve attempted to use .font8, but it seems to be incompatible with @font-face.

Since I began working on my UI before the recent UI update, all of my elements are built using traditional CSS and HTML. I understand this may not be the most ideal method, but is there a way to assign this font to my existing CSS-based text setup?

[GeorgeButler]

Hmm you could try uploading your font to a custom CDN like a Github Repo or something. Then you could reference it from that URL.

[Herman_Ptacnik]

Thanks, this worked!