Skip to content

fix: Serve external resources like icons and fonts locally #818

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

fix: Serve external resources like icons and fonts locally #818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e282ef3
Add bootstrap-icons to public directory
MiguelRipoll23 May 14, 2025
607ae80
Add IBM Plex Mono font files
MiguelRipoll23 May 14, 2025
77bce25
Replace font files with updated versions
MiguelRipoll23 May 14, 2025
fba143f
Fix font path in bootstrap-icons.css
MiguelRipoll23 May 14, 2025
d1b9e3e
Update Storybook preview to use local assets
MiguelRipoll23 May 14, 2025
1f9ed8f
Refactor font loading: move IBM Plex Mono styles to separate CSS file…
MiguelRipoll23 May 14, 2025
bfb2295
Update font imports in app.scss to use local assets for bootstrap-ico…
MiguelRipoll23 May 14, 2025
53ed629
Add Roboto font files to public directory
MiguelRipoll23 May 15, 2025
55be3c6
Add Inter font files to public directory
MiguelRipoll23 May 15, 2025
237446b
Add Roboto Mono font files
MiguelRipoll23 May 15, 2025
0128161
Add additional Roboto font weights to google-fonts.css
MiguelRipoll23 May 15, 2025
a1078b5
Replace Inter font weight 500 with 900
MiguelRipoll23 May 15, 2025
668f3c6
Add Inter font weights 100 and 900 to google-fonts.css
MiguelRipoll23 May 15, 2025
8fdf0ef
Add Roboto Mono font weights 100 and 700 to google-fonts.css
MiguelRipoll23 May 15, 2025
8a67509
Remove external font imports for Roboto, Inter, and Roboto Mono from …
MiguelRipoll23 May 15, 2025
0c9b9a9
Update font URLs in bootstrap-icons.css
MiguelRipoll23 May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 2 additions & 13 deletions packages/app/.storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,2 @@
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./styles/bootstrap-icons.css" />
<link rel="stylesheet" href="./styles/google-fonts.css" />
16 changes: 2 additions & 14 deletions packages/app/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,21 +95,9 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
return (
<React.Fragment>
<Head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
<link rel="stylesheet" href="./styles/bootstrap-icons.css" />
<link rel="icon" type="image/png" sizes="32x32" href="/Icon32.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
></link>
<link rel="stylesheet" href="./styles/google-fonts.css" />
<meta
name="viewport"
content="width=device-width, initial-scale=0.75"
Expand Down
Binary file added packages/app/public/fonts/bootstrap-icons.woff
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/bootstrap-icons.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/ibm-plex-mono-v19-latin-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/ibm-plex-mono-v19-latin-500.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/ibm-plex-mono-v19-latin-600.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/ibm-plex-mono-v19-latin-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/ibm-plex-mono-v19-latin-regular.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/inter-v18-latin-100.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/inter-v18-latin-900.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/roboto-mono-v23-latin-100.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/roboto-mono-v23-latin-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/roboto-v47-latin-100.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/roboto-v47-latin-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/roboto-v47-latin-500.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/roboto-v47-latin-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/app/public/fonts/roboto-v47-latin-regular.woff2
View file
Open in desktop
Binary file not shown.
2,078 changes: 2,078 additions & 0 deletions packages/app/public/styles/bootstrap-icons.css
View file
Open in desktop

Large diffs are not rendered by default.

111 changes: 111 additions & 0 deletions packages/app/public/styles/google-fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
@font-face {
font-display: swap;
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 300;
src: url("./../fonts/ibm-plex-mono-v19-latin-300.woff2") format("woff2");
}

@font-face {
font-display: swap;
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
src: url("./../fonts/ibm-plex-mono-v19-latin-regular.woff2") format("woff2");
}

@font-face {
font-display: swap;
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
src: url("./../fonts/ibm-plex-mono-v19-latin-500.woff2") format("woff2");
}

@font-face {
font-display: swap;
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
src: url("./../fonts/ibm-plex-mono-v19-latin-600.woff2") format("woff2");
}

@font-face {
font-display: swap;
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 700;
src: url("./../fonts/ibm-plex-mono-v19-latin-700.woff2") format("woff2");
}

@font-face {
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url('./../fonts/roboto-v47-latin-100.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('./../fonts/roboto-v47-latin-300.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('./../fonts/roboto-v47-latin-regular.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url('./../fonts/roboto-v47-latin-500.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url('./../fonts/roboto-v47-latin-700.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 100;
src: url('./../fonts/inter-v18-latin-100.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: url('./../fonts/inter-v18-latin-900.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 100;
src: url('./../fonts/roboto-mono-v23-latin-100.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 700;
src: url('./../fonts/roboto-mono-v23-latin-700.woff2') format('woff2');
}
7 changes: 2 additions & 5 deletions packages/app/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@

@import './variables';
@import '~bootstrap/scss/bootstrap';
@import url('https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected]&display=swap');
@import url('../public/styles/bootstrap-icons.css');
@import url('../public/styles/google-fonts.css');

.inter {
font-family: Inter, Roboto, 'Helvetica Neue', sans-serif;
Expand Down