# Prerequisite
First install the dependencies running `yarn install`, then make sure to build the package using `yarn build` and add the package as a dependency to the package/app you want to consume it from (could be the `app` or `ui` package) like so:
```
"dependencies": {
"@tamagui-google-fonts/spline-sans": "*"
}
```
## Usage
### Expo
Add this to the root of your file:
```ts
import { useFonts } from 'expo-font'
export default function App() {
const [loaded] = useFonts({
SplineSansLight: require('@tamagui-google-fonts/spline-sans/fonts/static/SplineSans-Light.ttf'),
SplineSans: require('@tamagui-google-fonts/spline-sans/fonts/static/SplineSans-Regular.ttf'),
SplineSansMedium: require('@tamagui-google-fonts/spline-sans/fonts/static/SplineSans-Medium.ttf'),
SplineSansSemiBold: require('@tamagui-google-fonts/spline-sans/fonts/static/SplineSans-SemiBold.ttf'),
SplineSansBold: require('@tamagui-google-fonts/spline-sans/fonts/static/SplineSans-Bold.ttf'),
})
// ...
```
## Web
Get the font's script (`` or `@import`) and add it to `` from [here](https://fonts.google.com/specimen/Spline+Sans)
## Next.js Font (next/font/google)
Import the font from `next/font/google` and give it a variable name in your `_app.tsx` like so:
```ts
import { SplineSans } from 'next/font/google' // the casing might differ
const font = SplineSans({
variable: '--my-font',
})
```
Add the variable style in `_app.tsx`:
```tsx
{*/ ...rest of your _app.tsx tree */}
```
Then go to the generated font package and update `family` with the variable.
So, change it from:
```ts
return createFont({
family: isWeb
? '"Spline Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
: 'Spline Sans',
```
To:
```ts
return createFont({
family: isWeb
? 'var(--my-font), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
: 'Spline Sans',
```
## Usage in config
```ts
import { createSplineSansFont } from '@tamagui-google-fonts/spline-sans'
export const myFont = createSplineSansFont(
{
face: {
"300": {
"normal": "SplineSansLight"
},
"400": {
"normal": "SplineSans"
},
"500": {
"normal": "SplineSansMedium"
},
"600": {
"normal": "SplineSansSemiBold"
},
"700": {
"normal": "SplineSansBold"
}
}
},
{
// customize the size and line height scaling to your own needs
// sizeSize: (size) => Math.round(size * 1.1),
// sizeLineHeight: (size) => size + 5,
}
)
```
NOTE: these instructions are auto-generated and might not be accurate with some fonts since not all fonts share the same conventions. you may need to edit them out to get them to work.