expo / google-fonts Goto Github PK

View Code? Open in Web Editor NEW

739.0 11.0 64.0 3.4 GB

Use any of the 1000+ fonts (and their variants) from fonts.google.com in your Expo app.

License: MIT License

JavaScript 97.70% TypeScript 0.11% Shell 0.01% HTML 2.17%

font fonts expo

google-fonts's People

Contributors

Stargazers

Watchers

Forkers

atiladev zifichai halilertekin sadhr emperorearth burn-c ohseungchan anasouza0087 ramsuthar305 offmymedsdk kinhbang89 lucascarrias skempfer igorgamantino trdtru okadri darthmarino showname2020 jozzzaa amandeepmittal dro-1 colinux 2wce basit3407 abischolz bycedric endrit-h devjva jucebrasil trajano margutti emagweb romavb07 fsvdr newbiw97 lukasjoosten leddner pedroelton kasia-g1 marhamat92 rawatdev julekgwa iamn1ck annievalla mhsnasln erdalstk mobile-apps-factory talalgit laragis mwinel sajjanbro jaewonsim avisionx kbadr1 nelsoncardoso samkenxstream aaronksaunders leducminh85 lucascarvalhosilva puthiilre edsonjuniornarvaes excalibursims whiterabbitj

google-fonts's Issues

useFont quicksand not loaded

Got this error for all quicksand fontFamily.

No error if I switched to other fonts.

UseFonts throws an error in Mac BigSur

UseFonts throws the following error on BigSur but its ok on Catalina

FontStatus: [Error: Unexpected status line: Y�] false


import * as React from "react";
import { View, Text, StyleSheet } from "react-native";
import AppLoading from "expo-app-loading";

import {
  useFonts,
  Roboto_100Thin,
  Roboto_100Thin_Italic,
  Roboto_300Light,
  Roboto_300Light_Italic,
  Roboto_400Regular,
  Roboto_400Regular_Italic,
  Roboto_500Medium,
  Roboto_500Medium_Italic,
  Roboto_700Bold,
  Roboto_700Bold_Italic,
  Roboto_900Black,
  Roboto_900Black_Italic,
} from "@expo-google-fonts/roboto";

export default function App() {
  let [loaded, error] = useFonts({
    Roboto_100Thin,
    Roboto_100Thin_Italic,
    Roboto_300Light,
    Roboto_300Light_Italic,
    Roboto_400Regular,
    Roboto_400Regular_Italic,
    Roboto_500Medium,
    Roboto_500Medium_Italic,
    Roboto_700Bold,
    Roboto_700Bold_Italic,
    Roboto_900Black,
    Roboto_900Black_Italic,
  });

  if (!loaded) {
    return <AppLoading />;
  }

  console.log("FontStatus:", error, loaded);

  return (
    <View>

      <Text style={{ fontFamily: "Roboto_100Thin", fontSize: 30 }}>
        ABCDEFGHIabcdefghi
      </Text>
      
    </View>
  );
}

We've come across a specific case where we're trying to nest text styles between tags. It works fine on Android but on iOS I need to specify the exact font with weight and style which breaks the style cascades.

Example:

const InsteadOfThis = (
  <Text style={{ fontFamily: 'Cabin_400Regular' }}>
    some regular text
    <Text style={{ fontFamily: 'Cabin_700Bold' }}>
      Bold section
      <Text style={{ fontFamily: 'Cabin_500Italic' }}>Italic but not Bold :(</Text>
    </Text>
  </Text>
)

const IWantThis = (
  <Text style={{ fontFamily: 'Cabin' }}>
    some regular text
    <Text style={{ fontWeight: 'bold' }}>
      Bold section
      <Text style={{ fontStyle: 'italic' }}>bold and italic!</Text>
    </Text>
  </Text>
)

I feel like I'm missing something simple: Is there a way to do this on iOS with Google fonts? (Either using Expo or ejected.)

(The use case is for output from a WYSIWYG editor where users can apply multiple styling to a text in an arbitrary order. Example: This is both bold, italic, and underlined.)

woff2 and woff variants

In general woff2 and woff are much better and can be better compressed for web.

I think there is some overlapping with what https://github.com/KyleAMathews/typefaces already does but with a smaller set of font files.

Wouldn't this work for expo projects too?

fontFamily "WorkSans_300Light" is not a system font and has not been loaded through Font.loadAsync.

If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Font.loadAsync.

Cannot install @expo-google-fonts/noto-sans-sc

error An unexpected error occurred: "https://registry.yarnpkg.com/@expo-google-fonts%2fnoto-sans-sc: Not found".

Consider using Github Actions (or equivalent) to keep fonts up-to-date

Hi, thank you all for the project.

The various foundries on Google Fonts add & update their fonts at breakneck speed, & thus the fonts found here tend to get outdated pretty quickly, as mentioned in #94 #89 #80.

Could the maintainers here consider using some sort of CI/CD pipeline to automate the process of pulling in new fonts? Similar work was put into place at @material-design-icons/svg, with their workflow to diff & pull in changes nightly. (As well as maic woo!! 🎉🎉)

Thank you for your consideration in advanced.

Fonts issue

Font files available from Google Fonts, and a public issue tracker for all things Google fonts.

Flow Circular cant see from the top of the screen at 300px

Little hack that I made

Hey there. I just made this little code so I can keep all my fonts in a single file, and easily access and use them with Intellisense. I couldn't find a way to avoid the duplicate writing of the font in import and in the useFontsArg (as this lib also requires). However, still a nice hack!

// A 'fonts.ts' file
import {
  NotoSans_400Regular,
  NotoSans_700Bold
} from '@expo-google-fonts/noto-sans';

import {
  Roboto_400Regular,
  Roboto_500Medium,
  Roboto_700Bold
} from '@expo-google-fonts/roboto';

export { useFonts } from 'expo-font';

export const useFontsArg = {
  NotoSans_400Regular,
  NotoSans_700Bold,
  Roboto_400Regular,
  Roboto_500Medium,
  Roboto_700Bold
};


type PropsToString<Obj> = {
  [K in keyof Obj]: string
}

export const fonts = { ...useFontsArg } as unknown as PropsToString<typeof useFontsArg>;
Object.keys(fonts).forEach((e: any) => (fonts as any)[e] = e );

// App.tsx
export default function App() {
  const [fontsLoaded] = useFonts(useFontsArg);

  if (!fontsLoaded)
    return <AppLoading/>;

  return <Text style={{fonts.Roboto_500Medium}}> Hey! </Text>` // Intellisense guides you! Yay!
}

Unable to resolve module missing-asset-registry-path from /node_modules/@expo-google-fonts/manrope/Manrope_200ExtraLight.ttf:

metro build index.js --platform ios --dev true --out output.js  --bundle-output ios/main.jsbundle -c 
metro.config.js --reset-cache
                                                      
                        #######                       
                   ################                   
                #########     #########               
            #########             ##########          
        #########        ######        #########      
       ##########################################     
      #####      #####################       #####    
      #####          ##############          #####    
      #####    ###       ######       ###    #####    
      #####    #######            #######    #####    
      #####    ###########    ###########    #####    
      #####    ##########################    #####    
      #####    ##########################    #####    
      #####      ######################     ######    
       ######        #############        #######     
         #########        ####       #########        
              #########          #########            
                  ######### #########                 
                       #########                      
                                                      
                                                      
warning: the transform cache was reset.
                    Welcome to Metro!
              Fast - Scalable - Integrated


 BUNDLE  ./index.js ▓▓░░░░░░░░░░░░░░ 18.0% (694/1842)Error: Unable to resolve module missing-asset-registry-path from /Users/user/projects/face-it-app/node_modules/@expo-google-fonts/manrope/Manrope_200ExtraLight.ttf: missing-asset-registry-path could not be found within the project or in these directories:
  node_modules
  ../../node_modules

  4 | �
       ��`z��vPP(��'/3A".#"#&632326'3"&&53326533#35!�'KHB+
    at ModuleResolver.resolveDependency (/Users/user/projects/face-it-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:158:15)
    at DependencyGraph.resolveDependency (/Users/user/projects/face-it-app/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at Object.resolve (/Users/user/projects/face-it-app/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/user/projects/face-it-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/user/projects/face-it-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/user/projects/face-it-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/Users/user/projects/face-it-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

package.json

{
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint-fix": "eslint ./src --quiet --fix . --ext .js,.tsx,.ts,.jsx",
    "lint": "eslint ./src --ext .js,.tsx,.ts,.jsx",
   }
  "dependencies": {
    "@apollo/client": "^3.6.9",

    "@expo-google-fonts/montserrat": "^0.2.2",
    "@expo-google-fonts/poppins": "^0.2.2",
    
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
  
    "expo": "^46.0.0",

    "expo-font": "~10.2.0",
    "expo-haptics": "~11.3.0",
    "expo-image-picker": "~13.3.1",
    "expo-linking": "~3.2.2",
    "expo-permissions": "~13.2.0",
    "expo-status-bar": "~1.4.0",
    "expo-store-review": "~5.3.0",
    "fp-ts": "^2.11.5",
    "graphql": "15.8.0",
    "isomorphic-fetch": "^3.0.0",
    "lottie-react-native": "5.1.3",
    "memoizerific": "^1.11.3",
    "native-base": "3.3.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-fast-compare": "^3.2.0",
    "react-native": "0.69.5",

  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
    "@expo/webpack-config": "^0.17.0",
    "@react-native-community/eslint-config": "^3.0.1",
    "@svgr/webpack": "^5.4.0",
    "@types/isomorphic-fetch": "0.0.36",
    "@types/jest": "^27.0.2",
    "@types/react": "~18.0.0",
    "@types/react-dom": "~18.0.0",
    "@types/react-native": "~0.69.1",
    "@typescript-eslint/eslint-plugin": "^5.26.0",
    "@typescript-eslint/parser": "^5.26.0",
    "apollo": "2.34.0",
    "babel-plugin-import-graphql": "^2.8.1",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-unused-imports": "^1.1.5",
    "fast-check": "^2.19.0",
    "firebase": "^9.10.0",
    "jest": "^26.6.3",
    "jest-expo": "^46.0.0",
    "prettier": "^2.4.1",
    "react-native-svg-transformer": "^0.14.3",
    "typescript": "4.7.2"
  },
  "jest": {
    "preset": "jest-expo",
    "setupFiles": [
      "./jest.setup.ts"
    ]
  },
  "resolutions": {
    "graphql": "15.8.0",
    "@types/react": "17.0.47"
  }
}

[Bundling failed]: node_modules/@expo-google-fonts/dev/index.js: Maximum call stack size exceeded

I just found out expo-google-fonts/dev and added to my code import { Inter_600SemiBold } from '@expo-google-fonts/dev'. Now, when building my expo app on launch, the following error is raised:

Android Bundling failed 10115ms
node_modules/@expo-google-fonts/dev/index.js: /home/hb/Dev/MyAppName/app/node_modules/@expo-google-fonts/dev/index.js: Maximum call stack size exceeded
RangeError: /home/hb/Dev/MyAppName/app/node_modules/@expo-google-fonts/dev/index.js: Maximum call stack size exceeded
    at PluginPass.ReferencedIdentifier (/home/hb/Dev/MyAppName/app/node_modules/@babel/helper-define-polyfill-provider/lib/visitors/usage.js:20:25)
    at PluginPass.newFn (/home/hb/Dev/MyAppName/app/node_modules/@babel/traverse/lib/visitors.js:218:17)
    at newFn (/home/hb/Dev/MyAppName/app/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/home/hb/Dev/MyAppName/app/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/home/hb/Dev/MyAppName/app/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/home/hb/Dev/MyAppName/app/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/home/hb/Dev/MyAppName/app/node_modules/@babel/traverse/lib/context.js:103:16)
    at TraversalContext.visitSingle (/home/hb/Dev/MyAppName/app/node_modules/@babel/traverse/lib/context.js:77:19)
    at TraversalContext.visit (/home/hb/Dev/MyAppName/app/node_modules/@babel/traverse/lib/context.js:131:19)

Vazirmatn font available on google fonts but not in expo-google-fonts

Vazirmatn (this link) is an Arabic Persian font available on google fonts, it is an standard font and widely used by developers in many countries who speak these languages.
Currently it's not added to expo-google-fonts, please make it available here.

google-font "Lato not working

import { StatusBar } from 'expo-status-bar'; 
import React, { useState, useEffect } from 'react';
import SignIn from './src/screens/SignIn';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SignUp from './src/screens/SignUp';
import AppLoading from 'expo-app-loading';
import {
  useFonts,
  Lato_100Thin,
  Lato_100Thin_Italic,
  Lato_300Light,
  Lato_300Light_Italic,
  Lato_400Regular,
  Lato_400Regular_Italic,
  Lato_700Bold,
  Lato_700Bold_Italic,
  Lato_900Black,
  Lato_900Black_Italic,
} from '@expo-google-fonts/lato';

const Stack = createNativeStackNavigator();

function App() {
  return (
      <Stack.Navigator initialRouteName="SignIn" >
        <Stack.Screen name="SignIn" component={SignIn} options={{headerShown:false}}/> 
        <Stack.Screen name="SignUp" component={SignUp} />
      </Stack.Navigator> 
  );
}  
//fonts 
export default () => {
  let [fontsLoaded] = useFonts({
    Lato_100Thin,
    Lato_100Thin_Italic,
    Lato_300Light,
    Lato_300Light_Italic,
    Lato_400Regular,
    Lato_400Regular_Italic,
    Lato_700Bold,
    Lato_700Bold_Italic,
    Lato_900Black,
    Lato_900Black_Italic,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return ( 
		<NavigationContainer>
			<App/>
		</NavigationContainer>
		)}
}

fontFamily "Lato_900Black," is not a system font and has not been loaded through Font.loadAsync.

If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Font.loadAsync.

Add Zen Kaku font

Would it be possible to add the Zen Kaku Gothic Antique Google Font?

https://fonts.google.com/specimen/Zen+Kaku+Gothic+Antique

Thanks.

not working expo 36

let [fontsLoaded] = useFonts({
Teko_700Bold,
});
fontsLoaded variable always showing false

Display swap on web

How can i set display: swap on web font?

expo-google-fonts/raleway not rendering

HI! I want to use the font raleway for my app, but I don't know what am doing wrong..
I have copied the documentation but the font is always the same default one.

Can you help me please ?

my app.js

import React from "react";
import { StyleSheet, View, StatusBar, Text } from "react-native";
import {
  useFonts,
  Raleway_700Bold,
  Raleway_400Regular,
} from "@expo-google-fonts/raleway";
import AppLoading from "expo-app-loading";

export default function App() {
  let [isLoaded] = useFonts({
    Raleway_400Regular,
    Raleway_700Bold,
  });

  if (!isLoaded) {
    return <AppLoading />;
  }
  return (
    <View style={styles.container}>
      <StatusBar hidden />
      <Text style={{ fontFamily: "Raleway_700Bold", fontSize: 50 }}>
        Good font ?!?!?
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

my package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/inter": "^0.1.0",
    "@expo-google-fonts/raleway": "^0.1.0",
    "expo": "~40.0.0",
    "expo-app-loading": "^1.0.1",
    "expo-font": "~8.4.0",
    "expo-screen-orientation": "~2.1.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-circular-progress": "^1.3.6",
    "react-native-material-ripple": "^0.9.1",
    "react-native-svg": "12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

Android virtual Device
Pixel 3a API 30
Android 11.0 x86

thanks for the help

Font fails MD5 integrity check

Hi there, not sure which community to post this issue in, but we are repeatedly seeing an issue with expo cli 5.4.2, expo 45.0.5, expo-font 10.1.0 and @expo-google-fonts/poppins 0.2.2 .
related to loading a font. When running

import { Poppins_400Regular, Poppins_600SemiBold, useFonts } from '@expo-google-fonts/poppins';

export default function useCachedResources() {
  let [fontsLoaded, error] = useFonts({
    poppins: Poppins_400Regular,
    'poppins-semibold': Poppins_600SemiBold,
  });
  // ...
}

on Android emulator with expo go, we keep getting

failed MD5 integrity check

This only happens on Android and iOS works fine. We've followed a lot of different forum threads and gh issues, purged package-lock.json, cleared metro cache, upgraded libraries, but are still hitting this.

Has anyone encountered this recently that would be able to help?

Epilogue Font Import: Not Supported

Maybe I am mistaken,

But does this package not support import of Epilogue font?

https://fonts.google.com/specimen/Epilogue?query=epilo

Thanks in advance.

Each font variant as a separate module

I really love how easy it is to use fonts in this package. It is much faster and less error-prone than manually downloading and loading fonts.

Problem

The final bundle size is too big and contains all the variants of the selected font, even if only a few variants are used in the app.

Proposal

Split the module into multiple submodules for each font variant individually. This approach ensures not all the fonts are imported.

This is how the fonts are currently included:

import { useFonts, RobotoMono_700Bold, RobotoMono_400Regular } from '@expo-google-fonts/roboto-mono'

I propose allowing the import of font variants from submodules as well, as follows:

import { useFonts } from '@expo-google-fonts/roboto-mono/hooks'
import RobotoMono_700Bold from '@expo-google-fonts/roboto-mono/700bold'
import RobotoMono_400Regular from '@expo-google-fonts/roboto-mono/400regular'

Benefits

Selective importing of font variants can significantly reduce the final app size. For instance, for the highly popular Inter font family, the app size can be reduced from 2.8MB to as little as 320kb for a single font variant.

I can look into the PR if you find this issue relevant.

Caching fonts

Is there any way to cache the fonts so they don't have to reload every time I refresh my page?

Doesn't work with expo/next-adapter instructions

Tried using this in next.js as described in docs here:

But even with next-fonts in my next.config, I still get load errors:

Expected font asset of type `string | FontResource | Asset` (number is not supported on web) instead got: null

@byCedric @EvanBacon Is there an up-to-date working example of using Expo + Next.js + (Google) Font Loading?

(I'll see if I can include a minimal repro soon, but for now just following the instructions seems to trigger the error / prevent font loading)

expo google fonts types say `metdata` but the actual object uses `metadata`

Summary

If you look at the typings for Google fonts loaded using Expo, it has __metdata__ but it should be __metadata__. It's just a one character typo, but needs the fonts to be all regenerated.

Managed or bare workflow? If you have `ios/` or `android/` directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android, iOS, Web

SDK Version (managed workflow only)

Environment

Expo CLI 4.11.0 environment info:
System:
OS: macOS 11.5.2
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v12.18.0/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v12.18.0/bin/npm
Watchman: 2021.08.30.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6858069
Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
npmPackages:
expo: ~42.0.1 => 42.0.3
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
npmGlobalPackages:
expo-cli: 4.11.0
Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

npm install @expo-google-fonts/libre-baskerville

Then look at the typings file.

useFonts not loading Poppins_600SemiBold on iOS 15, dev beta 4

When I attempt to load Poppins_600SemiBold, the async function never completes. Can consistently reproduce on iOS 15 beta 15. Doesnt complete or error out

`
var [fontsLoaded] = useFonts({

Poppins_400Regular,
Poppins_700Bold,
Poppins_500Medium,
Poppins_600SemiBold

})

if (!fontsLoaded) {
return ;
}
return (

);`

Unrecognized font family "Poppins-Light"

I'm loading a google custom font with expo in my App.js file as such:

`
import {
useFonts,
Poppins_300Light,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_700Bold,
Poppins_900Black,
} from "@expo-google-fonts/poppins";

function App() {

const [loading, setLoading] = useState(true);

let [fontsLoaded] = useFonts({
"Poppins-Light": Poppins_300Light,
"Poppins-Regular": Poppins_400Regular,
"Poppins-Regular-Italic": Poppins_400Regular_Italic,
"Poppins-Medium": Poppins_500Medium,
"Poppins-Bold": Poppins_700Bold,
"Poppins-Black": Poppins_900Black,
});

if (loading || !fontsLoaded) {
return ;
}
`

Now, when I try to use font-family: Poppins-Light in my Login.js file, I get the error Unrecognized font family "Poppins-Light"

Any idea what I'm doing wrong?

Strict Mode console warnings when loading google fonts

When I use the useFonts hook from the @expo-google-fonts/roboto package in React StrictMode, I get these warnings when loading the app:

where that file points to this line of code in the package: node_modules/@expo-google-fonts/roboto/useFonts.js

Versions:
expo: "48.0/18"
expo-font: "11.1.1"
@expo-google-fonts/roboto: "0.2.3"

Not working import { AppLoading } from 'expo';

import AppLoading from 'expo-app-loading'; this one solves the issue

Since expo-app-loading is being deprecated, can the readme change to expo-splash-screen

As said in the title, the expo-app-loading is being deprecated, and the example in the readme page would be better if it was using the new expo-splash-screen.

Expo SDK 50 embedded fonts

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.

Space Mono seems not to install correctly

(Expo SDK 38 and 39)
(Windows 10 Pro, PowerShell, Node v12.18.4, Yarn)

When I install Space Mono using expo install @expo-google-fonts/space-mono, the actual ttf files and the index.js file are not installed. Noticed this when Metro bundler failed out while trying to bundle up a dev build for my Android, because it couldn't find the module's index.js file.

I tried to rep this with three other font packages (Sofia, Sarala, and Tenor Sans) and could not. All installed their ttf files and index.js files as expected.

use Jest compatible index.js

When using jest with the fonts, it complains about unexpected token "export"
I tried to put it in transformIgnorePatterns but it does not appear to work with it and the jest-expo preset.

#49

Can you expose this as a npm package for each unique font?

If you wrote an automated build that published these as scoped fonts, that would be incredible, and I would gladly donate for this.

Dark mode gallery issue

I think it's really cool that you've integrated a gallery into the GitHub repo. The only unfortunate thing is, when you're browsing GitHub in dark mode, it's impossible to make out the fonts as they're all in black!

Is Urbanist Font available ?

Hi,
I can't find the Urbanist font.

TextStyle property fontVariant not working on iOS

Thanks for this neat little package to save some time.

Using the example from the README with Inter, fontVariant unfortunately has no effect on iOS (but on platform web).

...
fontFeatureSettings: "'zero' on, 'salt' on, 'ss01' on, 'ss03' on, 'cv01' on, 'cv07' on", // this is not supposed to work on `native`
fontVariant: ['common-ligatures', 'tabular-nums', 'slashed-zero'], // this is
…

Cannot import font JetBrains Mono

Installing: expo install @expo-google-fonts/JetBrains+Mono
results in "undefined": "@expo-google-fonts/JetBrains+Mono" in the package.json
Other fonts without spaces in the name so far have had no issues, this is what I get there:
"@expo-google-fonts/karla": "^0.2.3",

Google import js uses + in url, this was the only special char that installed 'something' in the bash. other special char did not work.
trying to import like this in my app.tsx:
import { /requested styles/ } from "@expo-google-fonts/jetbrains+mono"
again, no other special char works either. I get following error:
Cannot find module '@expo-google-fonts/jetbrains+mono' or its corresponding type declarations.

android bundling complete but still expo google fonts don't get loaded or it shows null or nothing in screen

import { StyleSheet, StatusBar, Text, View } from "react-native";
import RestaurantScreen from "./src/features/restaurants/screens/RestaurantScreen";
import { ThemeProvider } from "styled-components/native";
import { theme } from "./src/infrastructure/theme/index";
import React from "react";
import {
useFonts as useOswald,
Oswald_400Regular,
} from "@expo-google-fonts/oswald";
import {
useFonts as useLato,
Lato_400Regular,
Lato_400Bold,
} from "@expo-google-fonts/lato";

export default function App() {
const [oswaldLoaded] = useOswald({
Oswald_400Regular,
});
const [latoLoaded] = useLato({
Lato_400Regular,
Lato_400Bold,
});

if (!oswaldLoaded || !latoLoaded) {
return (
<View style={{ justifyContent: "center", alignItems: "center" }}>
Error

);
}
return (
<>

</>
);
}

const styles = StyleSheet.create({});

@expo-google-fonts/lato letter 'g' is cut off at the bottom

I upgraded my EXPO SDK to EXPO 47 and found that all the letter 'g' is cut off at the bottom, only in Android, I am using a Pixel 4a device, you can reproduce this using the below codes.

import React, { useState, useEffect } from 'react';
 
import { Text, View, StyleSheet } from 'react-native';
import AppLoading from 'expo-app-loading';
import {
  useFonts,
  Lato_100Thin,
  Lato_100Thin_Italic,
  Lato_300Light,
  Lato_300Light_Italic,
  Lato_400Regular,
  Lato_400Regular_Italic,
  Lato_700Bold,
  Lato_700Bold_Italic,
  Lato_900Black,
  Lato_900Black_Italic,
} from '@expo-google-fonts/lato';
 
export default () => {
  let [fontsLoaded] = useFonts({
    Lato_100Thin,
    Lato_100Thin_Italic,
    Lato_300Light,
    Lato_300Light_Italic,
    Lato_400Regular,
    Lato_400Regular_Italic,
    Lato_700Bold,
    Lato_700Bold_Italic,
    Lato_900Black,
    Lato_900Black_Italic,
  });
 
  let fontSize = 24;
  let paddingVertical = 6;
 
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_100Thin',
          }}>
          Lato Thin g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_100Thin_Italic',
          }}>
          Lato Thin Italic g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_300Light',
          }}>
          Lato Light g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_300Light_Italic',
          }}>
          Lato Light Italic g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_400Regular',
          }}>
          Lato Regular g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_400Regular_Italic',
          }}>
          Lato Italic g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_700Bold',
          }}>
          Lato Bold g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_700Bold_Italic',
          }}>
          Lato Bold Italic g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_900Black',
          }}>
          Lato Black g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_900Black_Italic',
          }}>
          Lato Black Italic g
        </Text>
      </View>
    );
  }
};

package.json

{
  "dependencies": {
    "prop-types": "^15.6.2",
    "@expo-google-fonts/lato": "^0.2.3",
    "expo-app-loading": "~2.1.1",
    "expo-font": "~11.0.1"
  }
}

Regenerate packages to pull in upstream changes?

Hi! 👋

I'd like to use this fancy technology to import Noto Color Emoji into my expo app, but there's no package for that font. Is it true that the packages need to be recreated occasionally to pull in new font from Google? If so, could you do that for me? 🙇‍♂️

Thanks!

https://registry.yarnpkg.com/@expo-google-fonts%2fnoto-serif-jp: Not found

Hi,

I'm trying to install https://github.com/expo/google-fonts/tree/master/font-packages/noto-serif-jp as per the instructions expo install @expo-google-fonts/noto-serif-jp expo-font and I'm getting the following error:

> yarn add @expo-google-fonts/noto-serif-jp expo-font@~8.1.0
yarn add v1.19.2
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@expo-google-fonts%2fnoto-serif-jp: Not found".

I looked on npm at https://www.npmjs.com/package/@expo-google-fonts/noto-serif-jp and it's not there. https://www.npmjs.com/package/@expo-google-fonts/noto-serif is there of course.

Is this intended?

Thanks!

Readme doesn't show current way to load fonts using expo-splash-screen

I was confused as to how to load google font's through the expo-splash-screen and I believe a couple more developers using the new SDK (45) would face the same as well.

Is it okay if I create a PR updating the current README to demonstrate that?

Roboto Flex is not up to date

Roboto Flex font according to fonts.google.com has 10 different styles, but the there's only one style in this repo for the font. Kindly help update the font

Cloudfront urls are http instead of https which break snack

I was digging into why my font wasn't showing up on Snack. I console logged the package and saw that the url was http instead of https. I grabbed the URL directly and added https and it worked

https://snack.expo.io/@peterpme/broken-inter-font-with-http
https://snack.expo.io/@peterpme/working-inter-font-with-https

Fonts aren't loading in web

I'm using two fonts, inter and oswald. Everything works fine on native ios and android, but on web the fonts do not load. I don't know what the root cause is, but console logging the font says

But if I look in the file structure I don't see a media folder under static. Only "js", which has "bundle.js":

There is no error anywhere, and the font family is reference as such:

but it just loads some default serif font.

Is there something related to webpack that I don't know about? Running "expo export:web" does create a "static/media" folder with the correct files.

Expo: 49.0.10
@expo-google-fonts/inter: ^0.2.3
@expo-google-fonts/oswald: "^0.2.3
@expo/webpack-config: ^19.0.0

Font Sora not found

Hi! Thanks for all the work and the available Fonts.

I wanted to warn that the font Sora is not available, so everybody can know.

I'll try to contribute but I'm not available in the short term.

Not working on web, font source is missing uri prop

Hi,
I tried to use this package in pretty fresh project, but run into an issue where nothing happened. My code looks like this:

fontsLoaded stays false and error is always null (but that's another issue). I then did some digging and found out that font source passed to loadAsync looks like this:

But then the FontLoader.web.js in expo-font package expects that object passed to it has property called uri, otherwise invalid source error is thrown.

I modified FontLoader.web.js code like this and it started working, but maybe this package should add this uri prop when user is on web?

useFonts returns false after switching expo-cli from 3.21.12 to 3.22.0

Hi,

After switching expo-cli from 3.21.12 to 3.22.0, useFonts returns true with the fonts specified (tried with nunito).
Downgrading to 3.21.12 works.

I don't know if it's related to expo-fonts or expo-cli?

Edit: replaced "true" to "false" in title