@expo-google-fonts/archivo

中文文档

0.4.2发布于 2025/09/09MIT AND OFL-1.1TypeScriptCommonJS零依赖近 30 天下载 34.3万

Use the Archivo font family from Google Fonts in your Expo app

文档目录7 节

Archivo
Usage
🔡 Gallery
👩‍💻 Use During Development
📖 License
🔗 Links
🤝 Contributing

@expo-google-fonts/archivo

npm version license publish size

This package lets you use the Archivo font family from Google Fonts in your Expo app.

Usage

Run this command from the shell in the root directory of your Expo project to add the font family package to your project

npx expo install @expo-google-fonts/archivo expo-font

Now add code like this to your project

import { Text, View } from "react-native";
import { useFonts } from '@expo-google-fonts/archivo/useFonts';
import { Archivo_100Thin } from '@expo-google-fonts/archivo/100Thin';
import { Archivo_200ExtraLight } from '@expo-google-fonts/archivo/200ExtraLight';
import { Archivo_300Light } from '@expo-google-fonts/archivo/300Light';
import { Archivo_400Regular } from '@expo-google-fonts/archivo/400Regular';
import { Archivo_500Medium } from '@expo-google-fonts/archivo/500Medium';
import { Archivo_600SemiBold } from '@expo-google-fonts/archivo/600SemiBold';
import { Archivo_700Bold } from '@expo-google-fonts/archivo/700Bold';
import { Archivo_800ExtraBold } from '@expo-google-fonts/archivo/800ExtraBold';
import { Archivo_900Black } from '@expo-google-fonts/archivo/900Black';
import { Archivo_100Thin_Italic } from '@expo-google-fonts/archivo/100Thin_Italic';
import { Archivo_200ExtraLight_Italic } from '@expo-google-fonts/archivo/200ExtraLight_Italic';
import { Archivo_300Light_Italic } from '@expo-google-fonts/archivo/300Light_Italic';
import { Archivo_400Regular_Italic } from '@expo-google-fonts/archivo/400Regular_Italic';
import { Archivo_500Medium_Italic } from '@expo-google-fonts/archivo/500Medium_Italic';
import { Archivo_600SemiBold_Italic } from '@expo-google-fonts/archivo/600SemiBold_Italic';
import { Archivo_700Bold_Italic } from '@expo-google-fonts/archivo/700Bold_Italic';
import { Archivo_800ExtraBold_Italic } from '@expo-google-fonts/archivo/800ExtraBold_Italic';
import { Archivo_900Black_Italic } from '@expo-google-fonts/archivo/900Black_Italic';

export default () => {

  let [fontsLoaded] = useFonts({
    Archivo_100Thin, 
    Archivo_200ExtraLight, 
    Archivo_300Light, 
    Archivo_400Regular, 
    Archivo_500Medium, 
    Archivo_600SemiBold, 
    Archivo_700Bold, 
    Archivo_800ExtraBold, 
    Archivo_900Black, 
    Archivo_100Thin_Italic, 
    Archivo_200ExtraLight_Italic, 
    Archivo_300Light_Italic, 
    Archivo_400Regular_Italic, 
    Archivo_500Medium_Italic, 
    Archivo_600SemiBold_Italic, 
    Archivo_700Bold_Italic, 
    Archivo_800ExtraBold_Italic, 
    Archivo_900Black_Italic
  });

  let fontSize = 24;
  let paddingVertical = 6;

  if (!fontsLoaded) {
    return null;
  } 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: "Archivo_100Thin"
        }}>
          Archivo Thin
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_200ExtraLight"
        }}>
          Archivo Extra Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_300Light"
        }}>
          Archivo Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_400Regular"
        }}>
          Archivo Regular
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_500Medium"
        }}>
          Archivo Medium
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_600SemiBold"
        }}>
          Archivo Semi Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_700Bold"
        }}>
          Archivo Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_800ExtraBold"
        }}>
          Archivo Extra Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_900Black"
        }}>
          Archivo Black
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_100Thin_Italic"
        }}>
          Archivo Thin Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_200ExtraLight_Italic"
        }}>
          Archivo Extra Light Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_300Light_Italic"
        }}>
          Archivo Light Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_400Regular_Italic"
        }}>
          Archivo Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_500Medium_Italic"
        }}>
          Archivo Medium Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_600SemiBold_Italic"
        }}>
          Archivo Semi Bold Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_700Bold_Italic"
        }}>
          Archivo Bold Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_800ExtraBold_Italic"
        }}>
          Archivo Extra Bold Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Archivo_900Black_Italic"
        }}>
          Archivo Black Italic
        </Text>
      </View>
    );
  }
};

🔡 Gallery

👩‍💻 Use During Development

If you are trying out lots of different fonts, you can try using the @expo-google-fonts/dev package.

You can import any font style from any Expo Google Fonts package from it. It will load the fonts over the network at runtime instead of adding the asset as a file to your project, so it may take longer for your app to get to interactivity at startup, but it is extremely convenient for playing around with any style that you want.

📖 License

The @expo-google-fonts/archivo package and its code are released under the MIT license.

All the fonts in the Google Fonts catalog are free and open source.

Check the Archivo page on Google Fonts for the specific license of this font family.

You can use these fonts freely in your products & projects - print or digital, commercial or otherwise. However, you can't sell the fonts on their own. This isn't legal advice, please consider consulting a lawyer and see the full license for all details.

🔗 Links

🤝 Contributing

Contributions are very welcome! This entire directory, including what you are reading now, was generated from code. Instead of submitting PRs to this directly, please make contributions to the generator instead.

版本与发布记录

@expo-google-fonts/archivo 共发布 9 个版本，首次发布于 2020/05/06；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`0.4.2`latest	2025/09/09	1.2 年前
`0.4.1`	2025/06/01	1.5 年前
`0.4.0`	2025/05/28	1.5 年前
`0.3.0`	2025/03/31	1.6 年前
`0.2.3`	2023/02/22	3 年前
`0.2.2`	2022/01/15	4 年前

关于 @expo-google-fonts/archivo 的常见问题

@expo-google-fonts/archivo 是什么？

Use the Archivo font family from Google Fonts in your Expo app

如何安装 @expo-google-fonts/archivo？

在项目目录运行 npm install @expo-google-fonts/archivo，或使用 pnpm add / yarn add / bun add。

@expo-google-fonts/archivo 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@expo-google-fonts/archivo 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require()；在 ES Module 项目中也可以用 import 引入（Node.js 会把 module.exports 作为默认导出）。

@expo-google-fonts/archivo 可以商用吗？

@expo-google-fonts/archivo 使用 MIT AND OFL-1.1 许可。声明的许可为 MIT AND OFL-1.1，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

@expo-google-fonts/archivo 的下载量有多少？

根据 npm 官方下载统计，@expo-google-fonts/archivo 在 2026/10/14 – 2026/11/12 这 30 天内被下载 343,076 次，日均约 11,436 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@expo-google-fonts/archivo 还在维护吗？

最新版本 0.4.2 发布于 2025/09/09（1.2 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/05/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。