Expo SDK 50 embedded fonts
enfipy opened this issue · comments
Hey there, perhaps it's already implemented but not documented but is there an option to embed font from @expo-google-fonts?
I have the following code that works in runtime but I would love to move it to the native build:
import { useFonts, NunitoSans_400Regular, NunitoSans_700Bold } from "@expo-google-fonts/nunito-sans"
export const useNunitoSans = () => {
return useFonts({
NunitoSans_400Regular,
NunitoSans_700Bold,
})
}Any ideas or workarounds are highly appreciated.
according to the docs you just have to add the config plugin:
https://docs.expo.dev/develop/user-interface/fonts/#use-a-custom-font
[
'expo-font',
{
fonts: [
'./node_modules/@expo-google-fonts/open-sans/OpenSans_400Regular.ttf',
'./node_modules/@expo-google-fonts/open-sans/OpenSans_500Medium.ttf',
'./node_modules/@expo-google-fonts/open-sans/OpenSans_600SemiBold.ttf',
'./node_modules/@expo-google-fonts/open-sans/OpenSans_700Bold.ttf',
'./node_modules/@expo-google-fonts/open-sans/OpenSans_800ExtraBold.ttf'
]
}
],
and define the font family thesame as before:
fontFamily: 'OpenSans_800ExtraBold',
but just doing that hasn't worked for me. It only works if I load the fonts using useFonts() or Font.loadAsync() which isn't loading it locally as far as I understand..
@enfipy were you able to get it to work?
@TowhidKashem hey there, I also tried something similar and didn't succeed. But I thought it was an issue with the pnpm setup or @expo-google-fonts library and didn't investigate further. So I couldn't fix it with some other blockers (like no sdk50 expo/config-plugins) and decided to wait until the general release (that I hope will be on 31st December) to migrate to Expo SDK 50.
Anyway, if it's already possible to achieve this - would be glad to see some solutions.
@TowhidKashem hey there, I also tried something similar and didn't succeed. But I thought it was an issue with the pnpm setup or @expo-google-fonts library and didn't investigate further. So I couldn't fix it with some other blockers (like no sdk50
expo/config-plugins) and decided to wait until the general release (that I hope will be on 31st December) to migrate to Expo SDK 50.Anyway, if it's already possible to achieve this - would be glad to see some solutions.
Ok thanks, for what it's worth this was the only real hiccup I had with the upgrade, this was the second attempt. First one there were lots of other build issues but they seemed to have fixed those in the last few weeks. With this the fonts just don't show up and appear as the system default ones, so overall project still works.
For anyone who finds this, there's actually no bug. The issue was not using the right font name. In my case the right name was actually "Open Sans Regular" and not the ones I was using before (name of the file or the export names).
You can use a tool like this to get the right font name:
I actually can't remember if this was the exact one I used but just Google "font file viewer" if this doesn't work..
It appears as if the new embedding method, available in SDK 50, doesn't work with Expo Go. Previously, we were loading the fonts aysnc via useFonts. With that removed and the embed options added to the config, none of the fonts are available in app while running in Expo Go. Instead, the console gets flooded with things like:
fontFamily "Montserrat_400Regular" is not a system font and has not been loaded through expo-font.
Having the same issues with expo go.. can't currently get fonts to load. We are using "expo": "^49.0.22",
@BlueRacoon @carbonatedcoder guys, it's embedded fonts that means they should be embedded inside your native build (that you create with eas build) and not Expo Go.
And on top of that "expo": "^49.0.22" - is Expo SDK 49, not Expo SDK 50 where this feature was introduced. So you need to update this package or use runtime loading.
@TowhidKashem I tried to use your method, and successfully embedded fonts as you mentioned into the native build (I checked the IPA file content), but somewhy can't load them at runtime. Looks like it just can't find them, while I tried all variations of names in font-family, so not sure what's the problem. I will try to use another font to double-check if this is some problem with NunitoSans.
P.S.: If anyone else can confirm that it works - I think we can close this issue, as it might be a problem on my side.
@TowhidKashem I tried to use your method, and successfully embedded fonts as you mentioned into the native build (I checked the IPA file content), but somewhy can't load them at runtime. Looks like it just can't find them, while I tried all variations of names in
font-family, so not sure what's the problem. I will try to use another font to double-check if this is some problem with NunitoSans.P.S.: If anyone else can confirm that it works - I think we can close this issue, as it might be a problem on my side.
I encountered issues again after leaving that last comment so I moved the fonts from out of node_modules and into the assets folder and it's working without issue. These are the fonts that's working for sure and the font family names I'm using if you want to confirm on your end:
app.config.js
[
'expo-font',
{
fonts: [
// open sans
'./src/assets/fonts/open-sans/OpenSans_400Regular.ttf',
'./src/assets/fonts/open-sans/OpenSans_500Medium.ttf',
'./src/assets/fonts/open-sans/OpenSans_600SemiBold.ttf',
'./src/assets/fonts/open-sans/OpenSans_700Bold.ttf',
'./src/assets/fonts/open-sans/OpenSans_800ExtraBold.ttf',
// m plus rounded 1c
'./src/assets/fonts/m-plus-rounded-1c/MPLUSRounded1c_400Regular.ttf',
'./src/assets/fonts/m-plus-rounded-1c/MPLUSRounded1c_500Medium.ttf',
'./src/assets/fonts/m-plus-rounded-1c/MPLUSRounded1c_700Bold.ttf',
'./src/assets/fonts/m-plus-rounded-1c/MPLUSRounded1c_800ExtraBold.ttf',
'./src/assets/fonts/m-plus-rounded-1c/MPLUSRounded1c_900Black.ttf'
]
}
],
Font families:
const getHeadingFont = (): string => {
if (black) return 'Rounded Mplus 1c Black';
if (extraBold) return 'Rounded Mplus 1c ExtraBold';
if (bold) return 'Rounded Mplus 1c Bold';
if (medium) return 'Rounded Mplus 1c Medium';
return 'Rounded Mplus 1c';
};
const getBodyFont = (): string => {
if (extraBold) return 'Open Sans ExtraBold';
if (bold) return 'Open Sans Bold';
if (semiBold) return 'Open Sans SemiBold';
if (medium) return 'Open Sans Medium';
return 'Open Sans Regular';
}
It would have been nicer to be able to directly link to node modules but it's not a big deal this way cause fonts don't usually change. Good luck!
guys, it's embedded fonts that means they should be embedded inside your native build (that you create with
eas build) and not Expo Go.
Right, but many people still use Expo Go to develop their app so, at a minimum, the docs should callout that the embedded approach does not work within Expo Go and requires a development build. Otherwise, Expo Go users are left in a pseudo state where it will work once built, but not currently during development.
Closing as it now just works well, as already specified in the docs - you just need to specify fontFamily to match the font file name used in config.
For example, this works pretty well (app.config.json):
// etc.
// plugins: [...
[
"expo-font",
{
"fonts": [
"../../node_modules/@expo-google-fonts/nunito-sans/NunitoSans_400Regular.ttf",
"../../node_modules/@expo-google-fonts/nunito-sans/NunitoSans_700Bold.ttf"
]
}
],
// etc.And then just:
<Text
style={{
fontFamily: "NunitoSans_700Bold",
}}
>