diff --git a/app.config.js b/app.config.js index 6b2bad9385..fed1b17a31 100644 --- a/app.config.js +++ b/app.config.js @@ -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', ], }, ], diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts index c17e35e5ee..e02f8b91d8 100644 --- a/src/alf/fonts.ts +++ b/src/alf/fonts.ts @@ -1,7 +1,7 @@ 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"` @@ -40,14 +40,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}` } @@ -78,8 +104,19 @@ export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') { * 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'), - }) + return useFonts( + isAndroid + ? { + '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'), + } + : { + InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'), + 'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'), + }, + ) } diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index 9ea585ee7c..1d99e5e572 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -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 = {