كيفية استخدام Google Fonts في مشروع تصميم الويب التالي

ربما سمعت أن Google لديها المئات من خطوط الويب المجانية الجاهزة للاستخدام في مشروعك التالي. لكن كيف تستخدمها على موقع الويب الخاص بك؟ ستوجهك هذه المقالة خلال الخطوات التي يجب اتخاذها من أجل تشغيلها على موقع الويب الخاص بك. من المفترض أن يستغرق الأمر أقل من 10 دقائق!

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

"تم إطلاق Google Fonts لأول مرة في عام 2010 كمبادرة هندسية للمضي قدمًا بالويب وجعله أسرع." - تصميم جوجل

تم إطلاق Google Fonts في عام 2010 ، وسرعان ما أصبحت أكبر مجموعة خطوط مجانية ومفتوحة المصدر على الإنترنت. جميع خطوط Google مجانية للاستخدام التجاري والشخصي. يسهل موقع Google Fonts على أي شخص تحديد الخطوط المختلفة واستخدامها بسرعة لتلبية احتياجات التصميم الخاصة بهم.

من يستخدم خطوط جوجل؟

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

من الذي يصنع الخطوط؟

تتعاون Google Fonts مع مصممي الكتابة ومسابك الكتابة ومجتمع التصميم في جميع أنحاء العالم. هؤلاء الأشخاص والمؤسسات يصممون الخطوط التي تراها على Google Fonts. على سبيل المثال ، Łukasz Dziedzic هو مصمم محرف مستقل قام بتصميم الخط الشهير Lato. قام مسبك محرف باسم ParaType بتصميم الخط PT Serif.

لماذا تهتم Google بالخطوط؟

يمنح كل رابط واجهة برمجة تطبيقات لخطوط Google على موقع ويب Google الفرصة للقيام بمزيد من التنقيب عن البيانات. هل هذا يبدو مقزز؟ نعم ، لكنني لا أعتقد أنه يجب أن يمنعك من استخدام خطوط Google.

سبب آخر أكثر راحة يهتم Google بالخطوط هو أنهم يريدون جعل خطوط الويب مفتوحة المصدر متاحة للجمهور. إنهم يريدون إنشاء شبكة ويب أسرع وأكثر جمالًا يسهل تصفحها واستخدامها. لقد بدأوا أيضًا Google Fonts في عام 2010 عندما كانت هناك حاجة ماسة إلى خدمة مثل هذه ، لذلك قاموا بحل مشكلة أخرى كنا نواجهها على الإنترنت. # لازم

لماذا يجب علي التفكير في استخدامها؟

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

  • الخطوط سهلة التنفيذ على موقع الويب الخاص بك
  • هناك أكثر من 850 خطًا للاختيار من بينها (والعدد مستمر)
  • تستمر الجودة الإجمالية للخطوط في الزيادة
  • يمكن أيضًا تنزيل خطوط Google لاستخدامها في الطباعة

حسنًا ، حسنًا ، حسنًا! الآن إلى كيفية استخدامها.

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

1) انتقل إلى موقع Google Fonts

قم بزيارة موقع Google Fonts حيث ستتمكن من الاختيار من بين 853 مجموعة خطوط والعد! يتيح لك موقع الويب تصفية النتائج حسب نمط الخط واللغات والشعبية والوزن. تتميز Google Fonts أيضًا بخطوط جديدة إذا قمت بزيارة الصفحة "المميزة".

2) ابحث عن الخطوط التي تريدها

إذا كان لديك اسم عائلة خط في الاعتبار ، فيمكنك البحث عنه.

3) انقر فوق "+" عندما تكون مستعدًا لاستخدامه

تحتوي كل مجموعة خطوط على زر علامة زائد في الزاوية اليمنى العلوية. انقر فوق زر علامة الجمع لإضافة عائلة الخطوط إلى "درج التحديد" الذي يظهر أسفل الشاشة.

4) كرر الخطوات من 1 إلى 3 إذا كنت تبحث عن أكثر من خط واحد لاستخدامه

5) انقر فوق "درج التحديد" لإظهار جميع الخطوط التي اخترتها

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

6) "درج التحديد" هو المكان الذي ستحصل فيه على الكود الذي ستقوم بنسخه / لصقه في كود HTML و CSS على مواقع الويب الخاصة بك

من "درج التحديد" ، ستقوم بنسخ الرمز للصقه في HTML و CSS. لكي تعمل Google Fonts على موقع الويب الخاص بك ، يجب أن يكون لديك عائلة الخطوط المرتبطة بواجهة برمجة تطبيقات Google Fonts (في HTML) ويجب أن يكون لديك عائلة الخطوط المحددة (في CSS).

7) أضف أوزانًا وأنماط خطوط مختلفة إذا كنت ترغب في ذلك بالنقر فوق علامة التبويب "تخصيص"

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

8) انسخ كود HTML والصقه في موقع الويب الخاص بك

حسنا نحن على وشك الانتهاء! كل ما نحتاجه الآن هو نسخ ولصق كود HTML و CSS في موقع الويب الخاص بك. أولاً ، انسخ رابط HTML في رأس مستند HTML الخاص بك.

9) انسخ قاعدة CSS والصقها في ملف CSS الخاص بموقعك

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

10) احفظ كلا الملفين (HTML و CSS) ثم قم بتحديث موقع الويب الخاص بك واعرض الخط الجديد

لا تنسى الحفظ والتحديث!

ها أنت ذا! لقد نجحت في تنفيذ أول خط Google الخاص بك على موقع الويب الخاص بك. تهانينا ، أنت مبرمج. من العدل أن نقول إن خطوط Google هي أساسًا ...

المزيد من القراءة

  • "Reimagining Google Fonts" بواسطة Yuin Chien (تصميم Google)
  • "6 نصائح لإقران أفضل للخطوط" بواسطة Hayden Mills (زوج الخطوط)
  • "اختيار خطوط الويب: دليل المبتدئين" بواسطة Google Fonts

شكرا للقراءة

لا تتردد في ترك تعليق أدناه أو التواصل معي على Twitter بأي أسئلة ✌️

أيضًا ، أنا منشئ Font Pair ، الذي يساعدك على إقران خطوط Google معًا. اطلع على منشورنا الجديد على موقع Medium لقراءة المزيد من منشورات الطباعة!