Using fonts in anvil

Anvil Q&A
1

Hi
Im trying to use a different font for my anvil app
I’m using fonts from the google fonts website
and I have followed the guide on the Anvil docs on how to use fonts
but for some reason they are not showing on my website

I’ve added this code to the html code

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">

and I have added this code to the css code

/* Typography */
body {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  line-height: 1.4286;
  background-color: #fafafa;
}

is there anything that I am missing?

thanks

2

Have you tried adding it directly to a div with some text on a custom HTML form to see if it works in that most basic sense? I don’t know anything about CSS and fonts, but it seems like putting it on the body tag is not likely going to make it apply to every element since some other selector is likely to supersede it.

3

Remove the quote around Rubik, that should do the trick.

font-family: Rubik, sans-serif;

Also, add this block in native libraries instead of HTML. anything you add in native libraries gets injected inside head tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">

Let me know if that helped!

1 Like