Lines Matching refs:fonts
3 description: Learn about using custom fonts, supported font formats for each platform and loading t…
12 Both Android and iOS and most desktop operating systems come with their own set of platform fonts. …
14 …ts own set of platform fonts, if you want to produce an experience that is consistent for all user…
18 …rson. A common convention in React Native apps is to put your fonts in an **./assets/fonts** direc…
52 … state of the font. When an app is initialized, the hook loads the map of fonts as shown in the ex…
60 'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
71 … [`Font.loadAsync`](#use-fontloadasync-instead-of-the-usefonts-hook) to load the fonts in your app.
75 …s` hook](/versions/latest/sdk/font/#usefonts) to import the font from **./assets/fonts** directory.
77 <SnackInline label="Using custom fonts" dependencies={['expo-font', 'expo-splash-screen']} files={{…
83 /* @info Also, import SplashScreen so that when the fonts are not loaded, we can continue to show S…
85 /* @info This prevents SplashScreen from auto hiding while the fonts are loaded. */
91 'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
94 …/* @info After the custom fonts have loaded, we can hide the splash screen and display the app scr…
141 …en/) package. For more information on that, see [Waiting for fonts to load](#wait-for-fonts-to-loa…
143 ## Platform built-in fonts
145 …ont by not specifying a font family. Each platform has a different set of fonts available by defau…
147 … Different browsers and operating systems are configured to use different fonts for each of these …
159 …fonts listed in [Google Fonts](https://fonts.google.com/). To use one of these, check out the [`ex…
161 …nter font you can install the [`@expo-google-fonts/inter`](https://www.npmjs.com/package/@expo-goo…
163 <Terminal cmd={['$ npx expo install expo-font @expo-google-fonts/inter']} />
167 <SnackInline label="Using Google fonts" dependencies={['@expo-google-fonts/inter']}>
172 import { useFonts, Inter_900Black } from '@expo-google-fonts/inter';
203 ## Wait for fonts to load
205 …fonts won't be ready right away, it is generally a good practice to not render anything until the …
207 ### Load fonts on the web
211 In general, these strategies are not recommended for native apps. If you include your fonts in your…
212 fonts will always be delivered to the user by the time your code is running. The one exception to t…
216 You probably don't need to know anything beyond this point to use custom fonts effectively in your …
220 In general, it's best and safest to load fonts from your local assets. If you submit to app stores,…
222 … your project's assets, you can do it by replacing the `require('./assets/fonts/MyFont.otf')` with…
260 > **warning** **If loading remote fonts, make sure they are being served from an origin with CORS p…
264 …u prefer, or if you want to have more fine-grained control over when your fonts are loaded before …
267 …'assets/fonts/Inter-Black.otf': 'https://snack-code-uploads.s3.us-west-1.amazonaws.com/~asset/44b1…
276 'Inter-Black': require('./assets/fonts/Inter-Black.otf'),