Dealing with font faces

[Code-Victor]

How can I use google fonts in my @font-face declaration?
I also tried using a font file(.tff) and it didn't work

const globalStyles = globalCss({
  '@font-face':{
    fontFamily:'Open Sans',
    src:`url('./fonts/OpenSans-VariableFont.ttf') format('truetype')`,

  },
})

declaration

const Button = styled("button", {
  backgroundColor: "$gray400",
  borderRadius: "9999px",
  fontSize: "16px",
  fontFamily: "Open Sans",
})

how can I do this ?

[tianenpang]

I am using different fonts as theme token and then using them in styled or css.

• Specify the font in globalCss.
• Define the font token in createStitches.

Here's an example with next.js: codesandbox.io/s/next-stitches-font-1ygp26

Preload the font in pages/_document.tsx

[Code-Victor]

Thank you..... It works 💯