Lines Matching refs:font

3 description: Learn about using custom fonts, supported font formats for each platform and loading t…
12 …you want to inject some more brand personality into your app, a well-picked font can go a long way.
14 …e aspects of getting a custom font, loading it in your project and what are some of the best pract…
16 ## Get a font
18 …st thing you need is a font file. For a working example, we are going to use Inter Black from the …
20 ### Supported font formats
22 …ficially supported font formats that work consistently in the Expo SDK across Android, iOS and the…
24 If you have both OTF and TTF versions of a font, prefer OTF. OTF is a newer format and **.otf** fil…
28 …font is in another format, you have to [customize the Metro bundler configuration](/guides/customi…
46 ## Use a custom font
48 After getting the font file, in your project, you need to install [`expo-font`](/versions/latest/sd…
50 ### Import the font
52 …rt the `useFonts` hook from `expo-font` package in your project. The hook keeps track of the loadi…
56 import { useFonts } from 'expo-font';
65 Then, you can use the font on the `<Text>` by using `fontFamily` style prop.
75 …imal example that uses Inter font family. It uses [`useFonts` hook](/versions/latest/sdk/font/#use…
77 <SnackInline label="Using custom fonts" dependencies={['expo-font', 'expo-splash-screen']} files={{…
82 /* @info Import useFonts hook from 'expo-font'. */ import { useFonts } from 'expo-font'; /* @end */
127 …ing is wrong. If the platform default font looks a little different for you, that's fine; the plat…
133   src="/static/images/font-example-custom-font.jpg"
139 <Terminal cmd={['$ npx create-expo-app --example with-custom-font']} />
145 …font, you can use the platform's default font by not specifying a font family. Each platform has a…
147 …generic font families that you can specify. Different browsers and operating systems are configure…
155 …font that the user of any system should be familiar with. However, don't be surprised when the sys…
159 …po/google-fonts) package. With these packages, you can quickly integrate any font or font variants.
161 For example, to use Inter font you can install the [`@expo-google-fonts/inter`](https://www.npmjs.c…
163 <Terminal cmd={['$ npx expo install expo-font @expo-google-fonts/inter']} />
165 …oadAsync`](/versions/latest/sdk/font/#loadasyncfontfamilyorfontmap-source). You do not have to exp…
205 …ht away, it is generally a good practice to not render anything until the font is ready. Instead, …
209 …lt font while their custom font is loading. Alternatively, to render the rest of their content, th…
218 ### Load a remote font directly from the web
222 …font file directly from the web rather than from your project's assets, you can do it by replacing…
224 <SnackInline label="Using a remote font" dependencies={['expo-font']}>
229 import { useFonts } from 'expo-font';
233     'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
260 …origin with CORS properly configured**. If you don't do this, your remote font might not load prop…
264 …er the hood, the hook uses `Font.loadAsync` from the [`expo-font`](/versions/latest/sdk/font/) lib…
266 <SnackInline label="Loading font async" dependencies={['expo-font']} files={{
273 import * as Font from 'expo-font';
277   'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',