topic Re: Avenir Next Font React App in Calcite Design System Questions

Avenir Next Font React App

awatson32 — Mon, 08 May 2023 22:13:24 GMT

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.

Re: Avenir Next Font React App

coryeicher — Tue, 09 May 2023 09:55:23 GMT

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

Re: Avenir Next Font React App

awatson32 — Tue, 09 May 2023 14:06:28 GMT

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