How to use custom fonts withing Framer X Code Components

CustomFontComponent.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

// =================================================
// Step 1: Create a file named app.css in your react component folder
// Import any font you want, e.g. 
//
// @import url('https://fonts.googleapis.com/css?family=Gamja+Flower');
//
// Your code folder should look like this:
//
// code/
// ├── CustomFontComponent.tsx
// ├── app.css
// └── canvas.tsx
//
// ==========================
import "./app.css";

const style: React.CSSProperties = {
  height: "100%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  textAlign: "center",
  color: "#8855FF",
  background: "rgba(136, 85, 255, 0.1)",
  overflow: "hidden",
  fontFamily: "'Gamja Flower', cursive",  <============ Step 2: reference your font inside your style
  fontSize: "100px"
};

// Define type of property
interface Props {
  text: string;
}

export class CustomFontComponent extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    text: "Hello World, I'm using custom fonts!"
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    text: { type: ControlType.String, title: "Text" }
  };

  render() {
    return (
        <div style={style}>{this.props.text}</div>
    );
  }
}

I used this font (https://fonts.google.com/specimen/Gamja+Flower?selection.family=Gamja+Flower), but you can use any font you like.

Here is some proof of it working both on the canvas and on preview mode.