نموذج من خط ثمانية — أصيل. حديث. مرن. حي.
نموذج من خط ثمانية — أصيل. حديث. مرن. حي.
مشروع

تحميل خط ثمانية

حزمة خط ثمانية للويب: ثلاث عائلات، خمسة أوزان لكل عائلة. حمّل ملفات الخط مباشرة من هذه الصفحة بصيغة WOFF2 أو OTF، أو استخدمه في مشروعك عبر سكيل الذكاء الاصطناعي أو CDN أو npm.

خط ثمانية بعائلاته الثلاث وأوزانه الخمسة لكل عائلة، جاهز للاستخدام أينما احتجته:

في الطباعة، الهوية البصرية، أو واجهات المواقع والتطبيقات.

حمّل ملفات الخط مباشرة من هذه الصفحة، أو أضف سطر CSS واحد لمشروعك الرقمي وابدأ الاستخدام فورًا.

تحميل الخطوط

اختر العائلة والصيغة والأوزان التي تحتاجها، وسيتم تحميل الخط أو الخطوط مباشرة. وإن اخترت أكثر من ملف تُحزم في ZIP داخل متصفحك: بلا خادم ولا رفع ولا تثبيت أي شيء.

تحميل

خذ الخطوط معك

الصيغة
الأوزان
thmanyah-sans-Regular.woff2

ترخيص خط ثمانية للاستخدام الشخصي فقط. اقرأ الشروط

عائلات الخطوط والأوزان

تضم حزمة ثمانية ثلاث عائلات خط، كل عائلة بخمسة أوزان: 300 · 400 · 500 · 700 · 900.

خط ثمانيــة للعناوين

الاسم بالإنجليزي: Thmanyah Serif Display

مثالي للعناوين، بتفاصيله الأنيقة المُلفتة.

"Thmanyah Serif Display", serif

خط ثمانيــة للنصوص

الاسم بالإنجليزي: Thmanyah Serif Text

مثالي للنصوص الطويلة والفقرات، بوضوح عالٍ يريح القراءة.

"Thmanyah Serif Text", serif

خط ثمانيــة الرقمي

الاسم بالإنجليزي: Thmanyah Sans

يتميّز بانعدام التباين وبساطة تناسب الشاشات الرقمية.

"Thmanyah Sans", sans-serif

كل عائلة لها ملف تنسيق مستقل (sans.css و serif-display.css و serif-text.css)، فالمشروع الذي يحتاج عناوين العرض فقط لا يدفع ثمن بقية الوجوه.

أمثلة الاستخدام

خصائص CSS مباشرة

body {
  font-family: "Thmanyah Sans", sans-serif;
  font-weight: 400;
  direction: rtl;
}

h1, h2, h3 {
  font-family: "Thmanyah Serif Display", serif;
  font-weight: 700;
}

article p {
  font-family: "Thmanyah Serif Text", serif;
  font-weight: 400;
}

أصناف جاهزة بدون كتابة CSS

<p class="font-thmanyah-sans">ثمانية سانس</p>
<h1 class="font-thmanyah-serif-display">ثمانية سيريف ديسبلاي</h1>
<p class="font-thmanyah-serif-text font-weight-light">ثمانية سيريف تكست</p>

أصناف العائلة الجاهزة. .font-thmanyah-sans و .font-thmanyah-serif-display و .font-thmanyah-serif-text.

أصناف الوزن الجاهزة. .font-weight-light (300) و .font-weight-regular (400) و .font-weight-medium (500) و .font-weight-bold (700) و .font-weight-black (900).

للمطورين

توجد عدة طرق لإضافة الخط لمشروعك، اختر ما يناسبك:

وكيل الذكاء الاصطناعي (Skill)

إن كنت تستخدم أداة ذكاء اصطناعي توليدي للكود (مثل Claude Code أو غيرها)، أضف (Skill) الخط لأداتك وسيتولى الوكيل تثبيت الخط في مشروعك بنفسه، من تحميل الملفات إلى ربطها في CSS:

npx skills add https://github.com/EngDawood/thmanyah-font-web --skill thmanyah-font-web

أو حمّل ملف السكيل يدويًا من هنا: SKILL.md

CDN (الأسرع يدويًا)

بلا تثبيت، بلا تحميل، بلا أي إعدادات. أضف هذا السطر في <head> صفحتك:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dawod/thmanyah-font-web/index.css" />

ويمكنك أيضًا الاستيراد من unpkg بدلاً من jsDelivr إن أردت:

<link rel="stylesheet" href="https://unpkg.com/@dawod/thmanyah-font-web/index.css" />

مدير الحزم (npm)

مناسب لمشاريع React وVue وNext.js وأي أداة تبني Node:

npm install @dawod/thmanyah-font-web
// العائلات الثلاث معًا
import "@dawod/thmanyah-font-web";

// أو ما تحتاجه فقط، لتقليل حجم الحزمة
import "@dawod/thmanyah-font-web/sans.css";
import "@dawod/thmanyah-font-web/serif-display.css";
import "@dawod/thmanyah-font-web/serif-text.css";
/* أو داخل ملف CSS مباشرة */
@import "@dawod/thmanyah-font-web";

التحميل اليدوي

حمّل ملفات الخط بصيغة WOFF2 من الأداة في أعلى هذه الصفحة، ضعها في مجلد مشروعك (مثلاً fonts/)، ثم عرّفها في CSS عبر @font-face:

@font-face {
  font-family: "Thmanyah Sans";
  src: url("./fonts/ThmanyahSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

كرّر القاعدة لكل وزن تحتاجه، بتغيير font-weight واسم الملف. وإن فضّلت عدم كتابة قواعد @font-face بنفسك، يمكنك نسخ مجلد fonts/ وملف index.css الجاهزين من مستودع GitHub مباشرة إلى مشروعك، فيأتيان جاهزين مع الأصناف الجاهزة المذكورة في قسم أمثلة الاستخدام أعلاه.

PortableText [components.type] is missing "marketing.faq"

الأسئلة الشائعة

هل يدعم الخط واجهات المواقع والتطبيقات؟

أكيد. تقدر تستخدمه في تصميم واجهات المواقع والتطبيقات بمختلف عناصرها، مثل العناوين والنصوص والقوائم. لكن لا تنس مراعاة تنسيق أحجام النصوص في المقاسات الصغيرة والكبيرة واختبارها على الشاشات المختلفة لضمان الوضوح وتحسين تجربة المستخدم.

هل الخط مجاني؟

نعم، الخط متاح مجانًا. سواء للاستخدام الشخصي، أو في المشاريع والأعمال التجارية المختلفة، من الطباعة أو الهوية البصرية أو واجهات المواقع والتطبيقات.

هل يمكنني استخدام الخط في مشروع تجاري؟

نعم، ضمن حدود ترخيص ثمانية. راجع قسم الترخيص في أعلى الصفحة للتفاصيل.

ما الفرق بين صيغتي WOFF2 و OTF؟

صيغة WOFF2 مخصصة للويب، حجمها أصغر وتحميلها في المتصفح أسرع. أما OTF فهي الصيغة المناسبة لبرامج سطح المكتب، مثل برامج التصميم والكتابة.

هل أحتاج تحميل العائلة كاملة أم يمكنني تحميل وزن واحد فقط؟

تقدر تختار وزنًا واحدًا أو أكثر من أداة التحميل في أعلى الصفحة، أو تحمّل العائلة كاملة بجميع أوزانها في ملف ZIP واحد.

كيف يتم تحميل ملفات الخط؟

يتم تحميل الخط أو الخطوط مباشرة داخل متصفحك، وتُحزم في ZIP عند اختيار أكثر من ملف، بلا خادم وسيط.

ما الفرق بين التثبيت عبر CDN والتثبيت عبر npm؟

CDN لا يحتاج تثبيتًا، يكفي سطر واحد في صفحتك. أما npm فمناسب لمشاريع React وVue وNext.js وأي أداة تعتمد على Node، ويتيح استيراد عائلة واحدة فقط لتقليل حجم الحزمة.

هل يعمل سكيل الذكاء الاصطناعي (Skill) مع أي أداة؟

السكيل مصمم للعمل مع أدوات الذكاء الاصطناعي التوليدية للكود التي تدعم بروتوكول Skills، مثل Claude Code. تقدر أيضًا تحمّل ملف SKILL.md يدويًا وتستخدمه مع أي أداة تدعم الصيغة نفسها.

كيف أحدّث الخط لأحدث نسخة عند استخدام npm أو CDN؟

عبر npm نفّذ npm update @dawod/thmanyah-font-web. عبر CDN يتحدّث تلقائيًا لأنه يشير دائمًا لأحدث نسخة منشورة على jsDelivr.

كيف أفعّل الحروف المرسلة؟

تقدر تفعّل الحروف المرسلة من خلال إعدادات الخط في البرامج التي تدعم خصائص «OpenType» وتفعيل خيار «Stylistic Alternates». بعد تفعيل هذا الخيار ستظهر الحروف المرسلة تلقائيًا للمناسب منها داخل الكلمة.

كيف أُظهر رمز الريال السعودي؟

من خلال الاختصار «ر.س».

كيف أثبّت الخط على جهازي؟

ماك. افتح ملف الخط ثم اضغط «تثبيت الخط» في تطبيق «دفتر الخطوط».

ويندوز. اضغط بزر الفأرة الأيمن على ملف الخط ثم اختر «تثبيت».


حزمة الخط (أداة التحميل وغلاف CSS) بواسطة @engdawood .

تريد شيئًا مشابهًا لفريقك؟ أبدأ عادةً بنسخة أولى خلال أسبوعين.

تواصل معي