Import custom (not google font)

Anvil Q&A
1

I’m trying to use my custom font that is not on Google Font to Anvil but I don’t know where to start. I have .otf files of the font. Is there a way to store the font files somewhere on my anvil app?

2

See Adding your own asset files

3

Thanks! I could upload it but I dont think it works when I imported it in css

My import code:

@font-face {
  font-family: MarkPro;
  src: url("https://custom-font-testing.anvil.app/_/theme/markpro.otf") format("opentype");
}

@font-face {
  font-family: MarkPro;
  font-weight: bold;
  src: url("https://custom-font-testing.anvil.app/_/theme/markprobold.otf") format("opentype");
}

This is a testing app: https://anvil.works/build#clone:XKRYPJBIV5CVPCY5=H6FQR3VNCST5RQ4N3CTTVFFI

The font that is supposed to be my custom font looks really different, and I think that it’s a default font

4

I think you were pretty close

@font-face {
  font-family: 'MarkPro';
  src: url("_/theme/markpro.otf") format("opentype");
}

@font-face {
  font-family: 'MarkPro';
  font-weight: bold;
  src: url("_/theme/markprobold.otf") format("opentype");
}

you missed the quotes on font-family and using a relative url means that it works in the ide and in the live app.

4 Likes
5

thank you so much it worked!