Skip to content

Commit

Permalink
Fix font display on Android (#5776)
Browse files Browse the repository at this point in the history
* Fix font display on Android

* Format

* Split out fake fonts hook for platforms
  • Loading branch information
estrattonbailey authored Oct 17, 2024
1 parent 834beac commit 7ca1789
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 20 deletions.
7 changes: 7 additions & 0 deletions app.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,13 @@ module.exports = function (config) {
fonts: [
'./assets/fonts/inter/InterVariable.ttf',
'./assets/fonts/inter/InterVariable-Italic.ttf',
// Android only
'./assets/fonts/inter/Inter-Regular.otf',
'./assets/fonts/inter/Inter-Italic.otf',
'./assets/fonts/inter/Inter-SemiBold.otf',
'./assets/fonts/inter/Inter-SemiBoldItalic.otf',
'./assets/fonts/inter/Inter-ExtraBold.otf',
'./assets/fonts/inter/Inter-ExtraBoldItalic.otf',
],
},
],
Expand Down
52 changes: 34 additions & 18 deletions src/alf/fonts.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {TextStyle} from 'react-native'
import {useFonts} from 'expo-font'

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

const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
Expand Down Expand Up @@ -40,14 +39,40 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
*/
export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
if (fontFamily === 'theme') {
style.fontFamily = 'InterVariable'
if (isAndroid) {
style.fontFamily =
{
400: 'Inter-Regular',
500: 'Inter-Regular',
600: 'Inter-SemiBold',
700: 'Inter-SemiBold',
800: 'Inter-ExtraBold',
900: 'Inter-ExtraBold',
}[String(style.fontWeight || '400')] || 'Inter-Regular'

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

/*
* These are not supported on Android and actually break the styling.
*/
delete style.fontWeight
delete style.fontStyle
} else {
style.fontFamily = 'InterVariable'

if (style.fontStyle === 'italic') {
style.fontFamily += 'Italic'
}
}

// fallback families only supported on web
if (isWeb) {
// fallback families only supported on web
style.fontFamily += `, ${WEB_FONT_FAMILIES}`
}

Expand All @@ -70,16 +95,7 @@ export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
}
}

/*
* IMPORTANT: This is unused. Expo statically extracts these fonts.
*
* All used fonts MUST be configured here. Unused fonts can be commented out.
*
* This is used for both web fonts and native fonts.
/**
* Here only for bundling purposes, not actually used.
*/
export function DO_NOT_USE() {
return useFonts({
InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
})
}
export {DO_NOT_USE} from '#/alf/util/unusedUseFonts'
4 changes: 2 additions & 2 deletions src/alf/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ export const borderRadius = {
*/
export const fontWeight = {
normal: '400',
bold: isAndroid ? '700' : '600',
heavy: isAndroid ? '900' : '800',
bold: '600',
heavy: '800',
} as const

export const gradients = {
Expand Down
19 changes: 19 additions & 0 deletions src/alf/util/unusedUseFonts.android.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {useFonts} from 'expo-font'

/*
* IMPORTANT: This is unused. Expo statically extracts these fonts.
*
* All used fonts MUST be configured here. Unused fonts can be commented out.
*
* This is used for both web fonts and native fonts.
*/
export function DO_NOT_USE() {
return useFonts({
'Inter-Regular': require('../../../assets/fonts/inter/Inter-Regular.otf'),
'Inter-Italic': require('../../../assets/fonts/inter/Inter-Italic.otf'),
'Inter-Bold': require('../../../assets/fonts/inter/Inter-SemiBold.otf'),
'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
'Inter-Black': require('../../../assets/fonts/inter/Inter-ExtraBold.otf'),
'Inter-BlackItalic': require('../../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'),
})
}
15 changes: 15 additions & 0 deletions src/alf/util/unusedUseFonts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {useFonts} from 'expo-font'

/*
* IMPORTANT: This is unused. Expo statically extracts these fonts.
*
* All used fonts MUST be configured here. Unused fonts can be commented out.
*
* This is used for both web fonts and native fonts.
*/
export function DO_NOT_USE() {
return useFonts({
InterVariable: require('../../../assets/fonts/inter/InterVariable.ttf'),
'InterVariable-Italic': require('../../../assets/fonts/inter/InterVariable-Italic.ttf'),
})
}

0 comments on commit 7ca1789

Please sign in to comment.