diff --git a/src/Popup.css b/src/Popup.css
index 6cd335c..3ac139a 100644
--- a/src/Popup.css
+++ b/src/Popup.css
@@ -1,3 +1,5 @@
+@import url("./font.css");
+
 html {
   min-height: 300px;
   min-width: 300px;
diff --git a/src/tabs/font.css b/src/font.css
similarity index 60%
rename from src/tabs/font.css
rename to src/font.css
index fe58171..291e360 100644
--- a/src/tabs/font.css
+++ b/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) format("ttf");
+  src: url(data-base64:~assets/inter/regular.ttf);
 }
 
 @font-face {
   font-family: "Inter";
   font-style: bold;
   font-weight: 700;
-  font-display: swap;
-  src: url(data-base64:~assets/inter/bold.ttf) format("ttf");
+  src: url(data-base64:~assets/inter/bold.ttf);
 }
 
 body {
@@ -22,3 +20,7 @@ body {
   margin: 0;
   padding: 0;
 }
+
+button {
+  font-family: inherit;
+}
diff --git a/src/popup.tsx b/src/popup.tsx
index bef7366..13d87b8 100644
--- a/src/popup.tsx
+++ b/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();
diff --git a/src/tabs/PermissionGrant.css b/src/tabs/PermissionGrant.css
index b5f2983..0397c31 100644
--- a/src/tabs/PermissionGrant.css
+++ b/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 {
diff --git a/src/tabs/PermissionGrant.tsx b/src/tabs/PermissionGrant.tsx
index bfde7d8..5cd54fc 100644
--- a/src/tabs/PermissionGrant.tsx
+++ b/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() {
diff --git a/src/tabs/PermissionRequest.css b/src/tabs/PermissionRequest.css
index e69de29..d8f498d 100644
--- a/src/tabs/PermissionRequest.css
+++ b/src/tabs/PermissionRequest.css
@@ -0,0 +1 @@
+@import url("../font.css");
diff --git a/src/tabs/PermissionRequest.tsx b/src/tabs/PermissionRequest.tsx
index 97f0726..ec2984b 100644
--- a/src/tabs/PermissionRequest.tsx
+++ b/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() {