nextjs tailwind googlefonts selfhost starter
1.0.0
타이포그래피는 응용 프로그램을 Zing으로 만들 수 있습니다 !!!
Google 글꼴을 추가하면 앱에서 사용자 정의 글꼴을 사용할 수 있습니다. 그들은 무료로 광고되며 900 개 이상의 글꼴 가족이 선택할 수 있습니다. 2018 년부터 Google은 글꼴을 추가하는 방법으로 자체 호스팅을 권장했습니다.
무료이며 다양한 플랫폼에 내장 된 웹 안전 글꼴이 수 있습니다. 그러나 때로는 디자인 목적을 위해 더 맞춤화 된 무언가가 필요합니다.
그래서 "더 많은 것없이"...
이 repo 특히 CDN 링크를 사용하는 대신 Google 글꼴의 자조 주최와 Tailwind CSS를 사용하는 Next.js 앱에 통합하는 방법을 대상으로합니다.
많은 기사와 블로그에서 논의 된 자조 주최 장단점이 많이 있습니다. 여기에 자세히 설명하지 않을 것입니다. 이 readme 파일 끝에 몇 가지 링크를 제공했습니다.
Google Fonts는 오픈 소스로 광고되며 무료로 사용할 수 있습니다 ...
그러나 내 말을 받아들이지 마십시오.
이 예제에 사용 된 모든 글꼴은 SIL Open Font 라이센스 (OFL) v1.1의 Google 글꼴에서 제공됩니다. 나는 라이센스를 Repo 내의 셀프 호스팅 폴더에 통합하여 OFL에 요청된다.
참고 : FONT 라이센스 정보를 따르기 때문에 항상 글꼴 라이센스 정보를 직접 읽어야합니다. 이때 Google은 OFL V1.1 사용을 Fonts, 일부는 Apache 2 라이센스를 사용합니다. 우분투 글꼴은 우분투 글꼴 라이센스 v1.0을 사용합니다
자체 주최 또는 맞춤형 글꼴을 사용하기 전에 법적 조언을 구해야합니다.
여기에서 데모를 참조하십시오
다음 도구를 사용하여 여러 가지 방법으로 Google Fonts를 여러 가지 방법으로 보유 할 수 있습니다.
글꼴은 Googles Github Repo에서도 찾을 수 있습니다.
일단 다운로드 한 후에는 자체 호스트에 프로젝트에 추가 할 수 있습니다.
이를 호스팅하는 가장 쉬운 방법은 fonts 라는 서브 폴더의 public 폴더 아래에 있습니다.
다음과 같이 글꼴 자원 위치를 구성했습니다.이를 따라갈 필요가 없으며 유연성을 보여 주며
fonts하위 폴더 아래에 배치하는 대신 모든 글꼴을 구성 할 수 있습니다.
├── public
| └── fonts
| └── google
│ ├── font(s) by name
│ │ │ ├── .woff / .ttf (etc)
│ │ │ ├── .css
│ │ │ ├── licence.txt
├── styles
| └── global.css (app-base.css)
├── .gitignore
├── jsconfig.json
├── postcss.config.js
├── tailwind.config.js
글꼴은이 위치에서 Next.js 앱으로 Serverd가됩니다.
글꼴 파일, 라이센스, 스타일 시트 등을 다운로드하고 폴더를 구조화 한 후 글꼴로드를 수행해야합니다.
@font-face를 사용하여 글꼴을로드 할 수 있습니다. 위의 font 폴더의 글꼴 리소스와 함께 배치 된 CSS 파일을 참조하십시오.
결국 Tailwind Styles CSS 파일로 가져올 수 있습니다. 일반적으로 이것을 global.css 라고합니다. 다음은 다음 3 개의 파일을 사용하고 있습니다.
예를 들어:
@font-face {
font-family : 'Oswald Variable' ; /*Ive added a prefix to let me know its a variable font*/
font-style : normal;
font-weight : 200 700 ;
src : local ( 'Oswald' ) ,
url (/fonts/google/oswald/Oswald-VariableFont_wght.ttf) format ( 'truetype' );
font-display : swap;
} 다음으로 font-display 속성을 사용하여 글꼴 로딩에 대한 작은 최적화를 수행합니다.
font-display 속성과 함께 @font-face 사용하면 Fout 및 FOIT를 방지 할 수 있습니다.
이것을 구현하기 위해 사용할 수있는 여러 가지 전략이 있습니다.
| 전략 | 설명 |
|---|---|
1. block | 글꼴이로드 될 때까지 사용자에게 아무것도 렌더링하지 마십시오. |
2. swap | Google 글꼴에 권장됩니다. 글꼴이로드되면 교체됩니다. |
3. fallback | 권장되지 않습니다. 여전히 짧은 시간 동안 블록과 같은 보이지 않는 텍스트를 보여 주지만 결국 안전한 글꼴로 떨어질 것입니다. |
4. optional | 글꼴이 중요하지 않은 경우에 좋은 선택, 브랜드 및 콘텐츠에 더 중점을 둡니다. 느리게 연결된 폴백과 같습니다. 글꼴을로드하지 않을 수도 있습니다. |
이것은 브라우저에 나열된 폴백 시스템의 안전 전용 (예 : Sans Serif)을 사용하도록 지시 한 다음 다운로드 된 글꼴로 바꾸는 글꼴 진정 선언에 추가 할 수있는 새로운 규칙입니다.
다운로드가 완료되기를 기다리지 않고 콘텐츠를 표시하므로 성능이 우수합니다.
font-display: swap; 글꼴이 아직로드되지 않은 경우이 불분명 한 텍스트를 플래시하는 단점이 있습니다. 그러나 우리는 예압으로 그것을 해결할 수 있습니다.
우리는 페이지 앱의 <head> 에 글꼴을 사전로드 할 수 있습니다. 이것은 깜박이지 않고 표시하려는 임계 비트의 타이포그래피에 특히 유용합니다.
이것을, 우리는 페이지 헤드에 <preload> 추가 할 수 있습니다.
다음 .js에서는 다음과 같이 사용자 정의 _document.js 에 추가합니다.
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head > 참고 : 과도하게 사용하면 부정적인 영향을 줄 수 있으므로 예압을 사용할 때주의하십시오. 그래서 우리는 그것을 현명하게 사용합니다. 자원의 중요성을 설정하는 방법으로 필요한 경우 script 리소스에 대해서도 동일하게 할 수 있습니다.
다음으로 publicfonts 폴더에서 Fonts.css 파일을 만듭니다. 위의 @font-face 사용하여로드 된 Google Font 리소스의 다양한 CCS 파일을 가져 오는 곳입니다.
@import './google/oswald/Oswald-Variable.css' ;그런 다음 아래 테일 윈드 스타일 파일로 가져옵니다.
다음으로 ./styles 폴더 아래에서 app-base.css 파일에 다음을 추가합니다.
우리는 @layer 지시문을 사용하여 Tailwind에게 글꼴 스타일을 추가하는 "버킷"을 알려줍니다.
유효한 계층 지침은 기본, 구성 요소 및 유틸리티입니다.
예를 들어:
@layer base {
@import "../public/fonts/fonts.css";
}
그런 다음 스타일을 _app.js 파일로 가져옵니다.
import '@/styles/app-base.css';
import '@/styles/app-components.css';
import '@/styles/app-utilities.css';
마지막으로, 우리는 tailwind.config.js 파일을 설정하여 글꼴 가족을 앱에 추가합니다. 우리는 그것들을 기본 글꼴 테마에 추가하거나 테마 (또는 둘 다)를 확장합니다.
예를 들어:
const { fontFamily } = require('tailwindcss/defaultTheme');
module.exports = {
fontFamily: {
sans: ['Oswald Variable, Arial', fontFamily.serif],
serif: ['Merriweather Sans, Georgia', fontFamily.serif],
},
extend: {
fontFamily: {
'Grandstander-VariableFont': ['Grandstander Variable'],
},
},
},
;
그게 다야. 우리는 완료되었습니다. 자세한 내용은 코드를 참조하십시오.
읽어 주셔서 감사합니다. ? ?
이것이 유용하다고 생각되면 저를 별표로 해주세요.
다음은 유용 할 수있는 사람들에 대한 자세한 정보입니다. ?
Lighthouse를 사용하여 페이지의 성능을 테스트 할 수 있습니다. 이는 글꼴 및 스크립트 최적화를 찾고 FOUT 및 FOIT 문제를 포함한 권장 사항을 포함합니다.
일단 제작되면이 데모가 로컬로 달릴 때 다음과 같은 것을 얻는 것을 기쁘게 생각합니다.
내가 셀프 호스트로 선택한 주된 이유는 다음과 같습니다.
| 1. Google이 추천합니다 | 이제 Google 자체가 추천합니다. 2018 년부터 Google은 예압을 통한 최적의 성능을 위해 자체 호스팅을 권장했습니다. 셀프 호스팅은 무료이며 권장됩니다.이 비디오를 참조하십시오. Google Chrome Developers : 웹 성능은 쉽게 만들어졌습니다. |
| 2. 개인 정보를 위해 더 좋습니다 | 제 3 자 CDN은 쿠키와 추적 알고리즘을 사용할 수 있습니다. 이는 사용자 동의가 필요한 국가 (IE 데이터 개인 정보 및 GDPR, Google Fonts의 GDPR 준수를 참조하십시오. |
| 3. 보안에 더 좋습니다 | 자신의 서버에서 더 많은 제어). CDN을 사용할 때 실제로 최소 2 개의 도메인을 호출합니다. |
| 4. 더 빠르고 더 많은 정보 | Google Fonts에는 필요하지 않은 리소스가 추가됩니다. 글꼴 스타일 등을 선택하고 번들을 선택하고 고유 한 글꼴 관련 CSS 규칙/파일을 최소화하여 HTTP 요청이 줄어 듭니다. 사이트 타이포그래피에 필요한 특정 글꼴 및 유니 코드를 직접 제공함으로써이를 수행 할 수 있습니다. 온 가족이 아닌 글꼴 가족의 일부를 지정합니다. 글꼴 스타일 등을 선택하고 번들을 선택하고 고유 한 글꼴 관련 CSS 규칙/파일을 최소화하여 HTTP 요청이 줄어 듭니다. |
| 5. 오프라인 가용성 | 오프라인으로 액세스하는 모바일 및 데스크탑 앱의 경우 |
직접 시도해보십시오.
특정 사이트/앱으로 테스트하고 "캐시 비활성화"와 결합 된 DEV 도구와 연결 속도를 변경하는 내장 기능을 사용하는 것이 좋습니다.
글꼴을 추가하기 위해 npm packages 의 사용을 다루지 않았습니다. 이것이 당신이 선호하는 경우 온라인으로 사용할 수있는 많은 맛이 있습니다.
일부 대안은 FontSource 또는 Next-Google-Fonts를 사용해 보는 것입니다.
