refactor: remove font import and update font loading in Canvas.tsx

index.html

@@ -11,10 +11,6 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital@1&display=swap"
-      rel="stylesheet"
-    />
     <title>Gerador de Semaninha</title>
     <meta
       name="description"

src/components/Canvas/Canvas.tsx

@@ -42,7 +42,7 @@ const ImageRenderer = ({
         context.fillStyle = "#f5f5f5";
         context.fillRect(0, 0, canvas.width, canvas.height);
 
-        const { albumSize, artistSize, especialPlays } = setFont(
+        const { albumSize, artistSize, especialPlays } = await setFont(
           context,
           userInput.limit,
         );

src/index.css

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: "Fira Sans";
+  src: url("./assets/FiraSans-Italic.ttf") format("truetype");
+}
+
 /* CSS RESET */
 * {
   margin: 0;

src/main.tsx

@@ -1,10 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import "./assets/FiraSans-Italic.ttf";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);

src/utils/FontHandler.ts

@@ -13,8 +13,12 @@ export default function fontHandler(gridSize: number) {
   return fontSizes[gridSize];
 }
 
-export function setFont(context: CanvasRenderingContext2D, gridSize: number) {
+export async function setFont(
+  context: CanvasRenderingContext2D,
+  gridSize: number,
+) {
   const [artistSize, albumSize, especialPlays] = fontHandler(gridSize);
+  await document.fonts.load(`${artistSize}px Fira Sans`);
 
   context.font = `${artistSize}px Fira Sans`;
   context.shadowColor = "#2b2b2b";