엑스포 구글 폰트 출시!

Expo 프로젝트에서 Google Fonts를 더 쉽게 사용하고 싶었기 때문에 지난 1~2주 동안 Google Fonts에서 사용할 수 있는 모든 글꼴을 지원하는 라이브러리 작업을 했고 오늘 그 릴리스를 발표하게 되어 기쁩니다. !



Expo용 @expo-google-fonts 패키지를 사용하면 쉽게 사용할 수 있습니다.
991개 글꼴(및 해당 변형)
fonts.google.com을 Expo 앱에서 확인할 수 있습니다.

이 패키지와 모든 글꼴은 웹, iOS 및 Android에서 작동하며
무료로 사용할 수 있으며 오픈 소스입니다.

용법

다음은 매우 간단한 프로젝트에서 Inter font family을 사용하는 예입니다.

원하는 글꼴의 패키지를 설치하십시오.

expo install @expo-google-fonts/inter expo-font

앱에서

import React, { useState, useEffect } from 'react';

import { Text, View, StyleSheet } from 'react-native';
import { AppLoading } from 'expo';
import {
  useFonts,
  Inter_900Black,
} from '@expo-google-fonts/inter';

export default () => {
  let [fontsLoaded] = useFonts({
    Inter_900Black,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

        <Text style={{ fontFamily: 'Inter_900Black' }}>
          Inter Black
        </Text>

      </View>
    );
  }
};

예제 프로젝트

다음은 minimal but complete example 입니다.

각 개별 글꼴 모음 패키지 README에는 해당 글꼴 모음을 사용하는 전체 예제가 포함되어 있습니다.

🔡 사용 가능한 글꼴

fonts.google.com에서 사용 가능한 모든 Google 글꼴을 찾아볼 수 있습니다. Google Fonts의 글꼴 패밀리 이름에서 Expo Google Fonts 패키지 npm 패키지 이름을 얻을 수 있습니다. 일반적으로 npm 패키지 이름을 사용하는 것처럼 모든 것을 소문자로 만들고 공백을 대시로 바꾸십시오. 따라서 Source San Pro는 @expo-google-fonts/source-sans-pro가 됩니다.

내 친구 Leandro Favre는 전체 글꼴 목록을 찾아보고 검색할 수 있는 directory / search engine을 만들었습니다. 그러면 적절한 가져오기 설명이 제공됩니다.

다음은 사용 가능한 991 글꼴의 3020 변형에 대한 몇 가지 예입니다.

👩‍💻 @expo-google-fonts/dev

다양한 글꼴을 시도하는 경우 @expo-google-fonts/dev package을 사용해 볼 수 있습니다.

모든 Expo Google Fonts 패키지에서 모든 글꼴 스타일을 가져올 수 있습니다. 글꼴을로드합니다
에셋을 프로젝트에 파일로 추가하는 대신 런타임 시 네트워크를 통해 추가하므로 시간이 더 오래 걸릴 수 있습니다.
앱이 시작할 때 상호 작용할 수 있도록 하지만 매우 편리합니다.
원하는 스타일을 가지고 놀 수 있습니다.

📖 라이선스

Expo Google Fonts 프로젝트 및 해당 코드는 MIT 라이선스에 따라 라이선스가 부여됩니다.

Google Fonts 카탈로그의 모든 글꼴은 무료이며 오픈 소스입니다.

개별 글꼴에는 자체 라이선스가 있습니다. 많은 사람들이 다음을 사용하여 라이센스를 받았습니다.
Open Font License .
예를 들어 Nunito은 OFL을 사용합니다.
사용 중인 글꼴 모음의 Google 글꼴 페이지를 확인하고 해당 라이선스를 추가하세요.
게시할 때 프로젝트의 라이선스 목록.

Q: 이 글꼴을 상업적으로 사용할 수 있습니까? 로고를 만들거나 내 앱, 내 웹사이트 등에 사용할 수 있습니까?

A: 인쇄 또는 디지털, 상업용 또는 기타 제품 및 프로젝트에서 이러한 글꼴을 자유롭게 사용할 수 있습니다. 그러나 자체적으로 글꼴을 판매할 수는 없습니다. 이것은 법적 조언이 아닙니다. 변호사와 상담을 고려하고 자세한 내용은 전체 라이선스를 참조하십시오.

암호

프로젝트의 소스 코드는 다음 위치에 있습니다.

https://github.com/expo/google-fonts#readme

기여를 환영합니다!