Fix fonts

src/Popup.css

@@ -1,3 +1,5 @@
+@import url("./font.css");
+
 html {
   min-height: 300px;
   min-width: 300px;

src/font.css

@@ -2,16 +2,14 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  src: url(data-base64:~assets/inter/regular.ttf);
-  src: url(data-base64:~assets/inter/regular.ttf) format("ttf");
 }
 
 @font-face {
   font-family: "Inter";
   font-style: bold;
   font-weight: 700;
-  font-display: swap;
+  src: url(data-base64:~assets/inter/bold.ttf);
-  src: url(data-base64:~assets/inter/bold.ttf) format("ttf");
 }
 
 body {
@@ -22,3 +20,7 @@ body {
   margin: 0;
   padding: 0;
 }
+
+button {
+  font-family: inherit;
+}

src/popup.tsx

@@ -8,7 +8,6 @@ import { useToggleWhitelistDomain } from '~hooks/useDomainWhitelist';
 import { usePermission } from '~hooks/usePermission';
 
 import './Popup.css';
-import './tabs/font.css';
 
 function IndexPopup() {
   const domain = useDomain();

src/tabs/PermissionGrant.css

@@ -1,3 +1,5 @@
+@import url("../font.css");
+
 html {
   height: 100%;
 }
@@ -5,7 +7,6 @@ html {
 body {
   height: 100%;
   max-height: 100%;
-  font-family: 'Inter', sans-serif;
 }
 
 #__plasmo {

src/tabs/PermissionGrant.tsx

@@ -2,7 +2,6 @@ import { useDomainWhitelist } from '~hooks/useDomainWhitelist';
 import { usePermission } from '~hooks/usePermission';
 import { makeUrlIntoDomain } from '~utils/domains';
 
-import './font.css';
 import './PermissionGrant.css';
 
 export default function PermissionGrant() {

src/tabs/PermissionRequest.css

@@ -0,0 +1 @@
+@import url("../font.css");

src/tabs/PermissionRequest.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react';
 
 import { usePermission } from '~hooks/usePermission';
 
-import './font.css';
 import './PermissionRequest.css';
 
 export default function PermissionRequest() {