Avenir Next Font React App

[awatson32]

I created wireframes in Figma using the UI Kit, and I'm getting started on building the app in React. I'm looking to use the Avenir Next typeface used by Calcite, but I can't find much information on usage or how to include it in my project. Any direction is appreciated. 

[coryeicher · Accepted solution]

Calcite has many .css variables which let you override its defaults. For
example, if you want to change the Calcite font, you can set this one:

--calcite-sans-family

But, it sounds like you instead wish to use the Avenir font _elsewhere_ in
your application? If that's the case, one way is to import Avenir like this:

@import url('
https://fonts.googleapis.com/css2?family=Avenir:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap'
);

There are some good resources on the web which go into more detail on this
approach.

Hope this helps,

-Cory

[awatson32]

Thank you! Yes, I was having a hard time finding a good source for the Avenir font. Appreciate it.