CSS

CSS Google Font
إدراج خطوط من google fonts في لغة CSS

ستتعلم في هذا الدرس كيفة إدراج خطوط جديدة بخلاف الخطوط الأفتراضية من google font عن طريق ربط صفحة HTML بملف CSS من Google Fonts في لغة CSS.

التاريخ

23 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

7097

المواضيع

24
الشروحات chevron_left CSS Google Font chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Google Fonts
إدراج خطوط من google fonts في لغة CSS

</> CSS Google Fonts
إدراج خطوط من google fonts في لغة CSS

يمكن عن طريق مكتبة google fonts دمج خطوط عربية وأجنبية مُختلفة وخطوط حديثة وعصرية بصفحة الويب لأستخدام هذة الخطوط بدلاً من إستخدام الخطوط الأفتراضية التي يعتمدها المتصفح.

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


كيفة إستخدام خطوط Google Fonts؟

  • عن طريق مكتبة css جاهزة من موقع google fonts يتم دمجها بصفحة html لنوع خط معين.
  • وعن طريق لغة CSS نختار أي عنصر في صفحة الويب ونضع له خاصية font-family مع إسم الخط الزي قمنا بإختيارة من منصة google fonts.
CSS Google Font

</> CSS link google font
طريقة ربط خط من google fonts في لغة CSS

  1. الخطوة الأولي نذهب إلي الخطوط المتاحة علي منصة جوجل من علي هذا الرابــــط.
  2. الخطوة الثانية يمكن إختيار خط من الخطوط المعروضة في الصفحة الرئيسة من Google font أو البحث عن الخط الزي تريده سواء كانت خط عربي أو أجنبي.
  3. الخطوة الثالثة الدخول على صفحة الخط عن طريق الضغط علي اسم الخط في المربعات المتاحة على الصفحة.
  4. الخطوة الرابعة سوف تلاحظ وجود أحجام متعددة من الخط أمام كل حجم سوف تلاحظ رابط او زر  Select Light 300 أو Select Light 400نضغط علي أي حجم مناسب وسوف يضيف جوجل هذا الخط في المفضلة.
  5. الخطوة الخامسة ثم نذهب الي المفضلة من أعلي الصفحة يميناً أول رابط view selected font وفي الأغلب سوف تلاحظ أيقونته فقط وهي عباره عن ثلاث مربعات بالأعلى ومهم علامة +.
  6. الخطوة السادسة ننسخ روابط CSS من جوجل ثم نقوم بوضعها داخل ملف HTML لنقوم بربط الخط من مفضلة جوجل بصفحتنا مباشرة من سيرفرات جوجل.
الخطوة الأولي
الخطوة الأولي
الخطوة الثانية
الخطوة الثانية
الخطوة الثالثة
الخطوة الثالثة
الخطوة الرابعة
الخطوة الرابعة
الخطوة الخامسة
الخطوة الخامسة
الخطوة السادسة
الخطوة السادسة
CSS Google Arabic Font

طريقة ربط خط من خطوط جوجل في لغة CSS.

CSS Google Arabic Font

طريقة ربط خط من خطوط جوجل في لغة CSS.

<!DOCTYPE html>
<html>
<head>
  <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=Rubik+Moonrocks&display=swap" rel="stylesheet">
  <style>
    h1,p
    {
      font-family: Rubik Moonrocks
    }
  </style>
</head>
<body>
  <h1>CloseTag CSS Google Fonts</h1>
  <p>Test CSS Google Fonts</p>
  <p>Mobile Number is : 123456790</p>
</body>
</html>
مصطلحات الدرس
Font
Font

الخط

Fonts
Fonts

الخطوط

Google
Google

موقع جوجل

External
External

خارجي

Head
Head

عنوان

Arabic
Arabic

اللغة العربية

Select This Style
Select This Style

حدد هذا النمط أو الشكل

View
View

عرض / رؤية

Selected
Selected

محدد

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.