nextjs tailwind googlefonts selfhost starter
1.0.0
การพิมพ์สามารถทำให้แอปพลิเคชันของคุณ zing !!!
การเพิ่ม Google Fonts ช่วยให้คุณใช้ แบบอักษรที่กำหนดเอง ในแอพของคุณ พวกเขาโฆษณาเป็นฟรีและมีมากกว่า 900 ครอบครัวให้เลือก ตั้งแต่ปี 2561 Google ได้แนะนำการโฮสต์ตนเองเพื่อเพิ่มแบบอักษรของพวกเขา
มีจำนวนฟอนต์ ที่ปลอดภัยของเว็บ ที่ฟรีและสร้างขึ้นในแพลตฟอร์มต่างๆ อย่างไรก็ตามบางครั้งเราต้องการสิ่งที่ปรับแต่งได้มากขึ้นเพื่อให้บริการเพื่อการออกแบบของเรา
ดังนั้น "ไม่มีอะไรเพิ่มเติมเลย" ...
repo นี้มีเป้าหมายเฉพาะการโฮสต์ตัวเองของ Google Fonts แทนที่จะใช้ลิงก์ไปยัง CDN ของพวกเขาและวิธีการรวมเข้ากับแอพถัดไป JS ที่ใช้ Tailwind CSS
มีจำนวนข้อดีและข้อเสียสำหรับการโฮสต์ตัวเองซึ่งได้รับการกล่าวถึงในบทความและบล็อกจำนวนมากฉันจะไม่ให้รายละเอียดเกี่ยวกับสิ่งเหล่านี้ที่นี่ ฉันได้ให้ลิงก์สองสามฉบับในตอนท้ายของไฟล์ readme นี้เพื่ออ่านเพิ่มเติม
Google Fonts ถูกโฆษณาเป็นโอเพ่นซอร์สและใช้งานได้ฟรี ...
แต่อย่าใช้คำพูดของฉัน (ฉันไม่ได้เป็นคนธรรมดาและนี่ไม่ใช่คำแนะนำทางกฎหมาย)
แบบอักษรทั้งหมดที่ใช้ในตัวอย่างนี้มาจาก Google Fonts ภายใต้ใบอนุญาต SIL Open Font (OFL) v1.1 ฉันได้รับการดูแลเพื่อรวมใบอนุญาตไว้ในโฟลเดอร์โฮสต์ตัวเองภายใน repo ซึ่งมีการร้องขอใน OFL
หมายเหตุ: คุณควรอ่านข้อมูลใบอนุญาตแบบอักษรด้วยตัวเองเสมอเนื่องจากคุณต้องรับผิดชอบในการติดตาม ในเวลานี้ Google Fonts ใช้ OFL v1.1 บางคนใช้ใบอนุญาต Apache 2 แบบอักษร Ubuntu ใช้ใบอนุญาต Ubuntu Font V1.0
คุณควรขอคำแนะนำทางกฎหมายก่อนการโฮสต์ตนเองหรือใช้แบบอักษรที่กำหนดเอง
ดูการสาธิตรหัสที่นี่
คุณสามารถถือฟอนต์ของ Google ได้หลายวิธี (นี่ไม่ใช่รายการที่มีความประณีต) โดยใช้เครื่องมือต่อไปนี้:
ฟอนต์ยังสามารถพบได้ใน googles github repo
ครั้งหนึ่งคุณได้ดาวน์โหลดแล้วคุณสามารถเพิ่มลงในโครงการของคุณเพื่อโฮสต์ด้วยตนเอง
วิธีที่ง่ายที่สุดในการโฮสต์นั้นอยู่ภายใต้โฟลเดอร์ public ในโฟลเดอร์ย่อยชื่อ fonts
ฉันได้จัดโครงสร้างตำแหน่งทรัพยากรแบบอักษรดังนี้คุณไม่จำเป็นต้องทำตามนี้มันแสดงให้เห็นถึงความยืดหยุ่นและแบบอักษรทั้งหมดสามารถจัดระเบียบได้มากกว่าเพียงแค่ถูกวางไว้ใต้โฟลเดอร์ย่อยแบบ
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
ฟอนต์จะเป็นเซิร์ฟเวอร์จากตำแหน่งนี้ไปยังแอปถัดไปของเรา
เมื่อเราดาวน์โหลดไฟล์ตัวอักษรใบอนุญาตสไตล์ชีท ฯลฯ และจัดโครงสร้างโฟลเดอร์แล้วเราต้องทำการโหลดแบบอักษร
เราสามารถใช้ @font-face เพื่อโหลดแบบอักษร ดูไฟล์ CSS ที่วางไว้ข้างทรัพยากรตัวอักษรในโฟลเดอร์ font ด้านบน
ในที่สุดเราสามารถนำเข้าสิ่งเหล่านี้ไปยังไฟล์ CSS สไตล์ Tailwind โดยปกติสิ่งนี้เรียกว่า global.css ฉันใช้ 3 ไฟล์ที่นำเข้าสู่ไฟล์ next.js _app.js
ตัวอย่างเช่น:
@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-face ร่วมกับแอตทริบิวต์ font-display เราสามารถป้องกันไม่ให้ fout และ foit
มีกลยุทธ์จำนวนมากที่สามารถใช้งานได้:
| กลยุทธ์ | คำอธิบาย |
|---|---|
1. block | อย่าแสดงอะไรให้กับผู้ใช้จนกว่าแบบอักษรจะโหลด |
2. swap | แนะนำสำหรับ Google Fonts มันจะสลับออกเมื่อตัวอักษรโหลด |
3. fallback | ไม่แนะนำ มันยังคงแสดงข้อความที่มองไม่เห็นเช่นบล็อกในช่วงเวลาสั้น ๆ แต่ในที่สุดก็จะกลับไปที่ตัวอักษรที่ปลอดภัย |
4. optional | ตัวเลือกที่ดีเมื่อแบบอักษรไม่สำคัญให้ความสำคัญกับแบรนด์และเนื้อหามากขึ้น เป็นเหมือนทางเลือกที่เชื่อมต่อช้าซึ่งอาจไม่โหลดแบบอักษร |
นี่เป็นกฎใหม่ที่คุณสามารถเพิ่มลงในการประกาศแบบอักษรของคุณที่บอกให้เบราว์เซอร์ใช้ระบบทางเลือกที่ปลอดภัยในการติดต่อที่ปลอดภัยที่คุณได้ระบุไว้ (เช่น sans serif) จากนั้นเปลี่ยนเป็นตัวอักษรที่ต้องการเมื่อมีการดาวน์โหลด
เป็นการปรับปรุงประสิทธิภาพที่ดีเนื่องจากแสดงเนื้อหาโดยไม่ต้องรอการดาวน์โหลดให้เสร็จสิ้น
font-display: swap; มีข้อเสียเปรียบในการกระพริบข้อความที่ไม่มีการย่ำแย่นี้หากตัวอักษรยังไม่ได้โหลด แต่เราสามารถแก้ไขได้ด้วยการโหลดล่วงหน้า
เราสามารถโหลดแบบอักษรของเราล่วงหน้าได้ใน <head> ของแอพเพจของเรา สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการพิมพ์ที่สำคัญเหล่านั้นที่เราต้องการแสดงโดยไม่ต้องกระพริบ
สิ่งนี้เราสามารถเพิ่ม <preload> ลงในหัวของหน้าของเรา
ใน next.js เราเพิ่มลงใน _document.js ที่กำหนดเองดังนี้:
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head > หมายเหตุ: ระวังเมื่อใช้ preload เนื่องจากอาจมีผลกระทบเชิงลบหากใช้มากเกินไป ดังนั้นเราจึงใช้มันอย่างชาญฉลาด มันเป็นวิธีการตั้งค่าความสำคัญของทรัพยากรเราสามารถทำเช่นเดียวกันกับทรัพยากร script ของเราหากต้องการ
ต่อไปเราจะสร้างไฟล์ Fonts.css ภายใต้โฟลเดอร์ publicfonts นี่คือที่ที่เรานำเข้าไฟล์ CCS ต่างๆสำหรับทรัพยากร Google Font ที่โหลดโดยใช้ @font-face ด้านบนคือ IE
@import './google/oswald/Oswald-Variable.css' ;สิ่งนี้จะถูกนำเข้าสู่ไฟล์สไตล์ Tailwind ด้านล่าง
ต่อไปเราจะเพิ่มไฟล์ต่อไปนี้ในไฟล์ app-base.css ภายใต้โฟลเดอร์ ./styles
เราใช้คำสั่ง @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 เพื่อเพิ่ม Font Familes ลงในแอพของเรา เราอาจเพิ่มพวกเขาลงในธีมแบบอักษรพื้นฐานหรือขยายธีม (หรือทั้งสองอย่าง)
ตัวอย่างเช่น:
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'],
},
},
},
;
แค่นั้นแค่นั้น เราเสร็จแล้วดูรหัสสำหรับรายละเอียดเพิ่มเติม
ขอบคุณสำหรับการอ่าน - -
โปรดแสดงฉันถ้าคุณพบว่ามีประโยชน์
ต่อไปนี้ข้อมูลเพิ่มเติมสำหรับผู้ที่อาจพบว่ามีประโยชน์ -
โปรดจำไว้ว่าคุณสามารถใช้ประภาคารเพื่อทดสอบประสิทธิภาพของหน้าของคุณซึ่งจะมองหาตัวอักษรและการเพิ่มประสิทธิภาพสคริปต์และรวมถึงคำแนะนำรวมถึงปัญหา Fout และ Foit
เมื่อสร้างขึ้นฉันยินดีที่จะบอกว่าการสาธิตนี้จะได้รับสิ่งต่อไปนี้เมื่อทำงานในพื้นที่
เหตุผลหลักที่ฉันเลือกที่จะโฮสต์ตัวเองมีดังนี้:
| 1. Google แนะนำ | ตอนนี้แนะนำโดย Google เอง ตั้งแต่ปี 2561 Google ได้แนะนำการโฮสต์ตนเองเพื่อให้ดีที่สุดผ่านการโหลดล่วงหน้า การโฮสต์ตัวเองฟรีและได้รับการสนับสนุนดูวิดีโอนี้: Google Chrome Developers: ประสิทธิภาพของเว็บทำให้ง่าย |
| 2. ดีกว่าสำหรับความเป็นส่วนตัว | บุคคลที่สามของ CDN สามารถใช้คุกกี้และอัลกอริทึมการติดตามที่คุณไม่ทราบเกี่ยวกับ นี่อาจเป็นปัญหาในประเทศที่คุณต้องการความยินยอมจากผู้ใช้ (เช่นข้อมูลความเป็นส่วนตัวและ GDPR โปรดดู: การปฏิบัติตาม GDPR ของ Google Fonts |
| 3. ดีกว่าเพื่อความปลอดภัย | ควบคุมเซิร์ฟเวอร์ของคุณเองมากขึ้น) คุณโทรอย่างน้อย 2 โดเมนเมื่อใช้ CDN |
| 4. เร็วขึ้นและมากขึ้น | Google Fonts เพิ่มทรัพยากรที่คุณอาจไม่ต้องการ คุณสามารถเลือกรูปแบบตัวอักษร ฯลฯ และมัดและลดกฎ/ไฟล์ CSS ที่เกี่ยวข้องกับฟอนต์ของคุณเองโดยให้คำขอ HTTP น้อยลง คุณสามารถทำได้โดยการให้บริการแบบอักษรและ Unicodes ที่คุณต้องการสำหรับการพิมพ์ไซต์ของคุณ การระบุบางส่วนของครอบครัวแบบอักษรมากกว่าทั้งครอบครัว คุณสามารถเลือกรูปแบบตัวอักษร ฯลฯ และมัดและลดกฎ/ไฟล์ CSS ที่เกี่ยวข้องกับฟอนต์ของคุณเองโดยให้คำขอ HTTP น้อยลง |
| 5. ความพร้อมใช้งานออฟไลน์ | สำหรับแอพมือถือและเดสก์ท็อปที่เข้าถึงออฟไลน์ |
ลองทำด้วยตัวคุณเอง
ฉันขอแนะนำให้คุณทดสอบกับไซต์/แอพเฉพาะของคุณและใช้เครื่องมือ dev รวมกับ "ปิดการใช้งานแคช" และความสามารถในการเปลี่ยนความเร็วในการเชื่อมต่อ
ฉันไม่ได้ครอบคลุมการใช้ npm packages เพื่อเพิ่มแบบอักษร มีหลายรสชาติออนไลน์หากนี่คือความชอบของคุณ
ทางเลือกบางอย่างคือการลองใช้ แบบอักษร หรือ บรรยากาศแบบ gogle ครั้งต่อไป
