شرح صفوف ومحتوى الفقرة
في جوهرها، تعتمد جميع منصات الخطوط السحابية خلف الكواليس على قاعدة أصيلة في لغة CSS يمكنك كتابتها بنفسك مباشرةً، وهي قاعدة @font-face. تتيح لك هذه القاعدة وضع ملفات الخطوط داخل مجلدات مشروعك المحلي (مثل المجلد /fonts/) وتعريفها للمتصفح دون الاعتماد على أي خادم خارجي.
تتم عملية تضمين الخط المخصص عبر خطوتين متكاملتين — أولاً تكتب كتلة @font-face في مطلع ملف الأنماط لتمنح العائلة اسماً من اختيارك عبر font-family وتربطها بمسار الملف في الواصف src باستخدام دالة url() ودالة format("woff2")؛ وثانياً تستدعي هذا الاسم مع عائلة احتياطية داخل محددات الصفحة مثل body و h1.
CSS
@font-face {
font-family: "BrandCairo";
src: url("fonts/cairo-400.woff2")
format("woff2");
font-display: swap;
}
body {
font-family: "BrandCairo", sans-serif;
}