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.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic&display=swap" rel="stylesheet">

<style>
body {
    font-family: 'Noto Sans Arabic', sans-serif;
}
</style>

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic&display=swap');

body {
    font-family: 'Noto Sans Arabic', sans-serif;
}
</style>