Skip to content

Commit

Permalink
Use Inter variable font (#5540)
Browse files Browse the repository at this point in the history
  • Loading branch information
@estrattonbailey
estrattonbailey authored Sep 30, 2024
1 parent adaa79a commit b4941d8
Show file tree
Hide file tree
Showing 21 changed files with 18 additions and 167 deletions.
20 changes: 2 additions & 18 deletions app.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,24 +234,8 @@ module.exports = function (config) {
'expo-font',
{
fonts: [
// './assets/fonts/inter/Inter-Thin.otf',
// './assets/fonts/inter/Inter-ThinItalic.otf',
// './assets/fonts/inter/Inter-ExtraLight.otf',
// './assets/fonts/inter/Inter-ExtraLightItalic.otf',
// './assets/fonts/inter/Inter-Light.otf',
// './assets/fonts/inter/Inter-LightItalic.otf',
'./assets/fonts/inter/Inter-Regular.otf',
'./assets/fonts/inter/Inter-Italic.otf',
'./assets/fonts/inter/Inter-Medium.otf',
'./assets/fonts/inter/Inter-MediumItalic.otf',
'./assets/fonts/inter/Inter-SemiBold.otf',
'./assets/fonts/inter/Inter-SemiBoldItalic.otf',
'./assets/fonts/inter/Inter-Bold.otf',
'./assets/fonts/inter/Inter-BoldItalic.otf',
'./assets/fonts/inter/Inter-ExtraBold.otf',
'./assets/fonts/inter/Inter-ExtraBoldItalic.otf',
'./assets/fonts/inter/Inter-Black.otf',
'./assets/fonts/inter/Inter-BlackItalic.otf',
'./assets/fonts/inter/InterVariable.ttf',
'./assets/fonts/inter/InterVariable-Italic.ttf',
],
},
],
Expand Down
Binary file added assets/fonts/inter/InterVariable-Italic.ttf
View file
Binary file not shown.
Binary file added assets/fonts/inter/InterVariable.ttf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf
View file
Binary file not shown.
Binary file removed bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf
View file
Binary file not shown.
Binary file added bskyweb/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf
View file
Binary file not shown.
Binary file added bskyweb/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf
View file
Binary file not shown.
22 changes: 3 additions & 19 deletions bskyweb/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,8 @@

<!-- Hello Humans! API docs at https://atproto.com -->

<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
<!--
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
-->
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
<!--
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
-->
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
<!--
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
-->
<link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
<link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">

<style>
/**
Expand All @@ -53,7 +37,7 @@
body {
margin: 0px;
padding: 0px;
font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
/* Platform-specific reset */
-webkit-overflow-scrolling: touch;
Expand Down
25 changes: 2 additions & 23 deletions src/alf/fonts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,31 +40,10 @@ export function applyFonts(
fontFamily: 'system' | 'theme',
) {
if (fontFamily === 'theme') {
style.fontFamily =
{
// '100': 'Inter-Thin',
// '200': 'Inter-ExtraLight',
// '300': 'Inter-Light',
// '500': 'Inter-Medium',
// '700': 'Inter-Bold',
// '900': 'Inter-Black',
'100': 'Inter-Regular',
'200': 'Inter-Regular',
'300': 'Inter-Regular',
'400': 'Inter-Regular',
'500': 'Inter-SemiBold',
'600': 'Inter-SemiBold',
'700': 'Inter-SemiBold',
'800': 'Inter-ExtraBold',
'900': 'Inter-ExtraBold',
}[style.fontWeight as string] || 'Inter-Regular'
style.fontFamily = 'InterVariable'

if (style.fontStyle === 'italic') {
if (style.fontFamily === 'Inter-Regular') {
style.fontFamily = 'Inter-Italic'
} else {
style.fontFamily += 'Italic'
}
style.fontFamily += 'Italic'
}

// fallback families only supported on web
Expand Down
96 changes: 8 additions & 88 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,101 +7,21 @@
*/

@font-face {
font-family: 'Inter-Regular';
src: local('Inter-Regular'),
url(/assets/fonts/inter/Inter-Regular.otf) format('opentype');
font-weight: 400;
font-family: 'InterVariable';
src: local('InterVariable'),
url(/assets/fonts/inter/InterVariable.ttf) format('truetype');
font-weight: 300 1000;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter-Italic';
src: local('Inter-Italic'),
url(/assets/fonts/inter/Inter-Italic.otf) format('opentype');
font-weight: 400;
font-family: 'InterVariableItalic';
src: local('InterVariableItalic'),
url(/assets/fonts/inter/InterVariable-Italic.ttf) format('truetype');
font-weight: 300 1000;
font-style: italic;
font-display: swap;
}
/*
@font-face {
font-family: "Inter-Medium";
src: local("Inter-Medium"), url(/assets/fonts/inter/Inter-Medium.otf) format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-MediumItalic";
src: local("Inter-MediumItalic"), url(/assets/fonts/inter/Inter-MediumItalic.otf) format("opentype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
*/
@font-face {
font-family: 'Inter-SemiBold';
src: local('Inter-SemiBold'),
url(/assets/fonts/inter/Inter-SemiBold.otf) format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter-SemiBoldItalic';
src: local('Inter-SemiBoldItalic'),
url(/assets/fonts/inter/Inter-SemiBoldItalic.otf) format('opentype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
/*
@font-face {
font-family: "Inter-Bold";
src: local("Inter-Bold"), url(/assets/fonts/inter/Inter-Bold.otf) format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-BoldItalic";
src: local("Inter-BoldItalic"), url(/assets/fonts/inter/Inter-BoldItalic.otf) format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
*/
@font-face {
font-family: 'Inter-ExtraBold';
src: local('Inter-ExtraBold'),
url(/assets/fonts/inter/Inter-ExtraBold.otf) format('opentype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter-ExtraBoldItalic';
src: local('Inter-ExtraBoldItalic'),
url(/assets/fonts/inter/Inter-ExtraBoldItalic.otf) format('opentype');
font-weight: 800;
font-style: italic;
font-display: swap;
}
/*
@font-face {
font-family: "Inter-Black";
src: local("Inter-Black"), url(/assets/fonts/inter/Inter-Black.otf) format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-BlackItalic";
src: local("Inter-BlackItalic"), url(/assets/fonts/inter/Inter-BlackItalic.otf) format("opentype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
*/

/**
* BEGIN STYLES
Expand Down
22 changes: 3 additions & 19 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,8 @@
<link rel="preconnect" href="https://bsky.network">
<title>%WEB_TITLE%</title>

<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
<!--
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
-->
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
<!--
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
-->
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
<!--
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
-->
<link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
<link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">

<style>
/**
Expand All @@ -58,7 +42,7 @@
body {
margin: 0px;
padding: 0px;
font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
/* Platform-specific reset */
-webkit-overflow-scrolling: touch;
Expand Down

0 comments on commit b4941d8

Please sign in to comment.