Skip to content
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

Jump to bottom

[Neue] Parallel font loading on web #5411

Merged
merged 5 commits into from
Sep 19, 2024
Merged

[Neue] Parallel font loading on web #5411

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a6ea8fb
Parallel font loading
estrattonbailey Sep 19, 2024
7df3fca
Handle failures
estrattonbailey Sep 19, 2024
f02f62a
Rely on font-face and preload tags for font loading (#5431)
estrattonbailey Sep 19, 2024
a55d366
Merge remote-tracking branch 'origin/main' into neue/font-loading
estrattonbailey Sep 19, 2024
e0ef3d3
Cache fonts for a year
estrattonbailey Sep 19, 2024
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
Binary file added bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf
View file
Open in desktop
Binary file not shown.
127 changes: 127 additions & 0 deletions bskyweb/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,133 @@
<meta property="og:site_name" content="Bluesky Social" />
<link type="application/activity+json" href="" />

<script>
try {
const InterRegular = new FontFace(
estrattonbailey marked this conversation as resolved.
Show resolved Hide resolved
'Inter-Regular',
'url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf)',
{
style: 'normal',
weight: 400,
}
);
const InterItalic = new FontFace(
'Inter-Italic',
'url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf)',
{
style: 'italic',
weight: 400,
}
);
const InterMedium = new FontFace(
'Inter-Medium',
'url(/static/media/Inter-Medium.296aa2d65964269836b3.otf)',
{
style: 'normal',
weight: 500,
}
);
const InterMediumItalic = new FontFace(
'Inter-MediumItalic',
'url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf)',
{
style: 'italic',
weight: 500,
}
);
const InterSemiBold = new FontFace(
'Inter-SemiBold',
'url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)',
{
style: 'normal',
weight: 600,
}
);
const InterSemiBoldItalic = new FontFace(
'Inter-SemiBoldItalic',
'url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)',
{
style: 'italic',
weight: 600,
}
);
const InterBold = new FontFace(
'Inter-Bold',
'url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf)',
{
style: 'normal',
weight: 700,
}
);
const InterBoldItalic = new FontFace(
'Inter-BoldItalic',
'url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf)',
{
style: 'italic',
weight: 700,
}
);
const InterExtraBold = new FontFace(
'Inter-ExtraBold',
'url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)',
{
style: 'normal',
weight: 800,
}
);
const InterExtraBoldItalic = new FontFace(
'Inter-ExtraBoldItalic',
'url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)',
{
style: 'italic',
weight: 800,
}
);
const InterBlack = new FontFace(
'Inter-Black',
'url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf)',
{
style: 'normal',
weight: 900,
}
);
const InterBlackItalic = new FontFace(
'Inter-BlackItalic',
'url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf)',
{
style: 'italic',
weight: 900,
}
);

document.fonts.add(InterRegular);
document.fonts.add(InterItalic);
document.fonts.add(InterMedium);
document.fonts.add(InterMediumItalic);
document.fonts.add(InterSemiBold);
document.fonts.add(InterSemiBoldItalic);
document.fonts.add(InterBold);
document.fonts.add(InterBoldItalic);
document.fonts.add(InterExtraBold);
document.fonts.add(InterExtraBoldItalic);
document.fonts.add(InterBlack);
document.fonts.add(InterBlackItalic);

InterRegular.load();
InterItalic.load();
InterMedium.load();
InterMediumItalic.load();
InterSemiBold.load();
InterSemiBoldItalic.load();
InterBold.load();
InterBoldItalic.load();
InterExtraBold.load();
InterExtraBoldItalic.load();
InterBlack.load();
InterBlackItalic.load();
} catch (e) {}
</script>

{% block html_head_extra -%}{%- endblock %}
</head>
<body>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"web": "expo start --web",
"use-build-number": "./scripts/useBuildNumberEnv.sh",
"use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
"build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/*.png ./bskyweb/static/media/",
"build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/* ./bskyweb/static/media/",
"build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all",
"build-ios": "yarn use-build-number-with-bump eas build -p ios",
"build-android": "yarn use-build-number-with-bump eas build -p android",
Expand Down
3 changes: 2 additions & 1 deletion src/App.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,9 @@ import {TestCtrls} from '#/view/com/testing/TestCtrls'
import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
import * as Toast from '#/view/com/util/Toast'
import {Shell} from '#/view/shell'
import {ThemeProvider as Alf, useFonts} from '#/alf'
import {ThemeProvider as Alf} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
import {useFonts} from '#/alf/util/useFonts'
import {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
Expand Down
3 changes: 2 additions & 1 deletion src/App.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,9 @@ import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/Video
import * as Toast from '#/view/com/util/Toast'
import {ToastContainer} from '#/view/com/util/Toast.web'
import {Shell} from '#/view/shell/index'
import {ThemeProvider as Alf, useFonts} from '#/alf'
import {ThemeProvider as Alf} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
import {useFonts} from '#/alf/util/useFonts'
import {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
Expand Down
19 changes: 10 additions & 9 deletions src/alf/fonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {useFonts as defaultUseFonts} from 'expo-font'

import {isNative, isWeb} from '#/platform/detection'
import {isWeb} from '#/platform/detection'
import {Device, device} from '#/storage'

const FAMILIES = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif`
Expand Down Expand Up @@ -35,15 +35,16 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
}

/*
* Unused fonts are commented out, but the files are there if we need them.
* IMPORTANT: This is unused. Expo statically extracts these fonts, but we load
* them manually so that we can parallelize the loading along with the JS
* bundle.
*
* See `#/alf/util/useFonts` for the actually used hooks.
*
* All used fonts MUST be configured here. Unused fonts are commented out, but
* the files are there if we need them.
*/
export function useFonts() {
/**
* For native, the `expo-font` config plugin embeds the fonts in the
* application binary. But `expo-font` isn't supported on web, so we fall
* back to async loading here.
*/
if (isNative) return [true, null]
export function DO_NOT_USE() {
return defaultUseFonts({
// 'Inter-Thin': require('../../assets/fonts/inter/Inter-Thin.otf'),
// 'Inter-ThinItalic': require('../../assets/fonts/inter/Inter-ThinItalic.otf'),
Expand Down
8 changes: 8 additions & 0 deletions src/alf/util/useFonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export function useFonts() {
/**
* For native, the `expo-font` config plugin embeds the fonts in the
* application binary. But `expo-font` isn't supported on web, so we fall
* back to async loading here.
*/
return [true, null]
}
21 changes: 21 additions & 0 deletions src/alf/util/useFonts.web.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react'

export function useFonts() {
const [loaded, setLoaded] = React.useState(false)

React.useEffect(() => {
try {
document.fonts.ready
.then(() => {
setLoaded(true)
})
.catch(() => {
setLoaded(true)
})
} catch (e) {
setLoaded(true)
}
}, [setLoaded])

return [loaded, null]
}
127 changes: 127 additions & 0 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,6 +308,133 @@
margin-left: -6px;
}
</style>

<script>
try {
const InterRegular = new FontFace(
'Inter-Regular',
'url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf)',
{
style: 'normal',
weight: 400,
}
);
const InterItalic = new FontFace(
'Inter-Italic',
'url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf)',
{
style: 'italic',
weight: 400,
}
);
const InterMedium = new FontFace(
'Inter-Medium',
'url(/static/media/Inter-Medium.296aa2d65964269836b3.otf)',
{
style: 'normal',
weight: 500,
}
);
const InterMediumItalic = new FontFace(
'Inter-MediumItalic',
'url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf)',
{
style: 'italic',
weight: 500,
}
);
const InterSemiBold = new FontFace(
'Inter-SemiBold',
'url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)',
{
style: 'normal',
weight: 600,
}
);
const InterSemiBoldItalic = new FontFace(
'Inter-SemiBoldItalic',
'url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)',
{
style: 'italic',
weight: 600,
}
);
const InterBold = new FontFace(
'Inter-Bold',
'url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf)',
{
style: 'normal',
weight: 700,
}
);
const InterBoldItalic = new FontFace(
'Inter-BoldItalic',
'url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf)',
{
style: 'italic',
weight: 700,
}
);
const InterExtraBold = new FontFace(
'Inter-ExtraBold',
'url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)',
{
style: 'normal',
weight: 800,
}
);
const InterExtraBoldItalic = new FontFace(
'Inter-ExtraBoldItalic',
'url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)',
{
style: 'italic',
weight: 800,
}
);
const InterBlack = new FontFace(
'Inter-Black',
'url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf)',
{
style: 'normal',
weight: 900,
}
);
const InterBlackItalic = new FontFace(
'Inter-BlackItalic',
'url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf)',
{
style: 'italic',
weight: 900,
}
);

document.fonts.add(InterRegular);
document.fonts.add(InterItalic);
document.fonts.add(InterMedium);
document.fonts.add(InterMediumItalic);
document.fonts.add(InterSemiBold);
document.fonts.add(InterSemiBoldItalic);
document.fonts.add(InterBold);
document.fonts.add(InterBoldItalic);
document.fonts.add(InterExtraBold);
document.fonts.add(InterExtraBoldItalic);
document.fonts.add(InterBlack);
document.fonts.add(InterBlackItalic);

InterRegular.load();
InterItalic.load();
InterMedium.load();
InterMediumItalic.load();
InterSemiBold.load();
InterSemiBoldItalic.load();
InterBold.load();
InterBoldItalic.load();
InterExtraBold.load();
InterExtraBoldItalic.load();
InterBlack.load();
InterBlackItalic.load();
} catch (e) {}
</script>
</head>

<body>
Expand Down
Loading