nextjs tailwind googlefonts selfhost starter
1.0.0
الطباعة يمكن أن تجعل تطبيقاتك Zing !!!
تتيح لك إضافة خطوط Google استخدام خطوط مخصصة في تطبيقاتك. يتم الإعلان عنها على أنها مجانية وهناك أكثر من 900 عائلة خط للاختيار من بينها. منذ عام 2018 ، أوصت Google بالاستضافة الذاتية كوسيلة لإضافة خطوطها.
هناك عدد من الخطوط الآمنة على شبكة الإنترنت ، وهي مجانية ومضمنة في منصات مختلفة. ومع ذلك ، في بعض الأحيان نحتاج إلى شيء أكثر تخصيصًا ، لخدمة أغراض التصميم لدينا.
لذلك "بدون الكثير من الأشياء" ...
يستهدف هذا repo على وجه التحديد الاستضافة الذاتية لخطوط Google ، بدلاً من استخدام رابط لـ CDN الخاص بهم ، وكيفية دمجها في تطبيق NEXT.JS الذي يستخدم CSS Tailwind.
هناك عدد من الإيجابيات والسلبيات للاستضافة الذاتية ، والتي تمت مناقشتها في العديد من المقالات والمدونات ، ولن أتفصل عن ذلك هنا. لقد قدمت بعض الروابط في نهاية ملف ReadMe ، لمزيد من القراءة.
يتم الإعلان عن خطوط Google كمصدر مفتوح ومجاني للاستخدام ...
لكن لا تأخذ كلامي من أجل ذلك ، (أنا لست لقيًا وهذه ليست نصيحة قانونية)
يتم الحصول على جميع الخطوط المستخدمة في هذا المثال من خطوط Google تحت ترخيص SIL Open Font (OFL) v1.1. لقد حرصت على دمج التراخيص في مجلدات الاستضافة الذاتية داخل الريبو ، والتي يتم طلبها في OFL.
ملاحظة: يجب عليك دائمًا قراءة معلومات ترخيص الخط بنفسك لأنك مسؤول عن متابعتها. في هذا الوقت ، يستخدم Google Fonts Ofl V1.1 ، يستخدم البعض ترخيص Apache 2. تستخدم خطوط Ubuntu ترخيص خط Ubuntu v1.0
يجب عليك طلب المشورة القانونية قبل استضافة الذات أو استخدام أي خطوط مخصصة.
انظر رمز العرض هنا
يمكنك الحصول على خطوط Google بعدة طرق ، (هذه ليست قائمة ExhaaTivity) ، باستخدام الأدوات التالية:
يمكن أيضًا العثور على الخطوط على Google 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
ستكون الخطوط ServerD من هذا الموقع إلى تطبيق Next.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. سوف تبديل بمجرد تحميل الخط. |
fallback | غير موصى به. لا يزال يظهر نصًا غير مرئي مثل Block لفترة قصيرة ، ولكنه سيتراجع في النهاية إلى خط آمن. |
4. optional | خيار جيد عندما لا يكون الخط مهمًا ، ويركز أكثر على العلامة التجارية والمحتوى. يشبه الاحتياطي البطيء المتصلة الذي قد لا يحمل خط. |
هذه قاعدة جديدة يمكنك إضافتها إلى إعلان Font-Font الذي يطلب من المتصفح استخدام خطوط آمنة لنظام التراجع الذي أدرجته (على سبيل المثال Sans Serif) ، ثم قم بتبديل الخط المطلوب عند تنزيله.
إنه تحسين أداء جيد لأنه يعرض المحتوى دون انتظار الانتهاء من التنزيلات.
font-display: swap; هل لدى عيب وميض هذا النص غير المتواصل إذا لم يتم تحميل الخط بعد. ولكن يمكننا علاج ذلك مع التحميل المسبق.
يمكننا تحميل خطوطنا في <head> من تطبيق الصفحة لدينا. هذا مفيد بشكل خاص لتلك البتات الحرجة من الطباعة التي نريد عرضها دون وميض.
TODO هذا ، يمكننا إضافة <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 > ملاحظة: كن حذرًا عند استخدام التحميل المسبق ، حيث يمكن أن يكون له تأثير سلبي ، إذا كان الإفراط في استخدامه. لذلك نحن نستخدمها بحكمة. إنها وسيلة لتحديد أهمية مورد ما ، يمكننا أيضًا أن نفعل الشيء نفسه لموارد script الخاصة بنا إذا لزم الأمر.
بعد ذلك ، نقوم بإنشاء ملف Fonts.css ضمن مجلد publicfonts . هذا هو المكان الذي نستورد فيه ملفات CCS المختلفة لموارد FONT Google التي تم تحميلها باستخدام @font-face أعلاه ، أي
@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 لإضافة عائلة الخط إلى تطبيقنا. إما أن نضيفها إلى سمات الخط الأساسي أو تمديد السمات (أو كليهما).
على سبيل المثال:
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 نفسها. منذ عام 2018 ، أوصت Google بالاستضافة الذاتية ، من أجل الأداء الأمثل من خلال التحميل المسبق. الاستضافة الذاتية مجانية ويتم تشجيعها ، انظر هذا الفيديو: مطورو Google Chrome: أصبح أداء الويب سهلًا. |
| 2. أفضل للخصوصية | يمكن لـ 3rd Party CDN استخدام ملفات تعريف الارتباط وتتبع خوارزميات لا تعرف عنها. يمكن أن تكون هذه مشكلة في البلدان التي تحتاج فيها إلى موافقة المستخدم ، (أي خصوصية البيانات والناتج المحلي الإجمالي ، راجع: امتثال GDPR لخطوط Google. |
| 3. أفضل للأمان | مزيد من التحكم في الخادم الخاص بك). يمكنك بالفعل الاتصال بمجالين على الأقل عند استخدام CDN. |
| 4. أسرع وأكثر peformant | تضيف خطوط Google موارد قد لا تحتاجها. يمكنك اختيار أنماط الخطوط ، وما إلى ذلك ، وحزمة وقواعد/ملفات CSS المتعلقة بالخط ، مع إعطاء عدد أقل من طلبات HTTP. يمكنك القيام بذلك عن طريق خدمة الخطوط والحيوانات المحددة التي تحتاجها بالكامل للطباعة. تحديد أجزاء من عائلة الخط بدلاً من العائلات بأكملها. يمكنك اختيار أنماط الخطوط ، وما إلى ذلك ، وحزمة وقواعد/ملفات CSS المتعلقة بالخط ، مع إعطاء عدد أقل من طلبات HTTP. |
| 5. توفر متصل | لتطبيقات الأجهزة المحمولة وسطح المكتب التي يتم الوصول إليها في وضع عدم الاتصال. |
جرب هذا بنفسك.
أود أن أشجعك على الاختبار مع موقعك/تطبيقك المحدد واستخدام أدوات DEV مع "تعطيل ذاكرة التخزين المؤقت" والقدرة المدمجة على تغيير سرعات الاتصال.
لم أغطي استخدام npm packages لإضافة خطوط. هناك عدد من النكهات المتاحة على الإنترنت إذا كان هذا هو تفضيلك.
بعض البدائل هي محاولة استخدام FontSource أو Next-Google Fonts .
