CSSاستخدام خطوط جوجل

ما هي خطوط جوجل

توفر جوجل مجموعة رائعة من الخطوط العربية، الإنجليزية و غيرها من اللغات التي يمكنك استخدامها بشكل مجاني 100% في تصاميمك لجعلها تبدو أكثر جاذبية و لضمان أن الخطوط التي تستخدمها في تصاميمك ستعمل بشكل مؤكد عن جميع المستخدمين.

هذا هو الموقع الرسمي لخطوط جوجل و الذي يمكنك الإطلاع فيه على جميع الخطوط المتاحة، تجربتها بمختلف الأحجام، و تحميل ما شئت منها.

كيفية استخدام خطوط جوجل

يمكنك تضمين أي خط من جوجل بشكل مباشر في الصفحة بدون الحاجة لتحميله على جهازك.

الجميل في جوجل أنها تعطيك كود تضمين الخط بأسلوبين:

• أسلوب لتضمين الخط كوسم HTML.
• أسلوب لتضمين الخط بواسطة أمر @import الموجود في CSS.

إذا أردت تحميل الخط على جهازك يمكنك ذلك أيضاً و لكن لا داعي لهذا الأمر.

تضمين خطوط جوجل

بعد الدخول لموقع خطوط جوجل ستجد الصفحة كالتالي و لاحظ أنه يمكنك البحث فيها بسهولة عن أي نوع خط تريده.

خطوات البحث و التضمين

1- هنا قمنا باختيار Arabic لكي تظهر لنا أنواع الخطوط العربية فقط.

2- هنا قمنا بالنقر على نوع الخط Noto Sans Arabic لأنه الخط الذي سنقوم بتضمينه.

3- هنا نزلنا في الصفحة حتى وصلنا لأحجام الخطوط و اخترنا الحجم Regular 400.

4- هنا لاحظ أنه ظهر نقطة حمراء في قائمة الخطوط المختارة كإشارة إلى أننا قمنا بتحديد خط.
5- قم بالنقر عليها لكي تظهر لك جميع الخطوط التي قمت بتحديدها.

6- هنا لاحظ أنه يظهر إسم الخط الذي قمنا بتحديده و تحته مباشرة يظهر طرق تضمين الخط.
معلومة: هنا <link> هو خيار تضمين الخط بواسطة HTML و @import هو خيار تضمين الخط بواسطة CSS.

7- عند النقر على @import يظهر لنا خيار تضمين الخط بواسطة CSS كالتالي.

8- بعد تضمين الكود بأي طريقة تريدها عليك إضافة إسم الخط و الخط الإحتياطي الموضوعين هنا مع بعض لكي تضمن أن يتم استخدام الخط الإحتياطي إذا فشل المتصفح في تحميل الخط الأساسي.

استعمال كود خطوط جوجل

في المثال التالي قمنا بتضمين الخط Noto Sans Arabic كوسم HTML.

في المثال التالي قمنا بتضمين الخط Noto Sans Arabic كوسم CSS.