هناك 1052 مجموعة مختلفة من خطوط Google متاحة مجانًا (في وقت كتابة هذا المقال). هذا كثير من الخيارات! لذلك فلا عجب أنك بحاجة إلى مساعدة في العثور على تلك الإبرة في كومة قش مع قائمة بأفضل خطوط Google.
لقد حصلنا عليها من أجلك ، ثم سنشارك أيضًا بعض أفضل الممارسات لاستخدام خطوط Google في وورد بريس .
اختيار الخط هو أكثر من مجرد اختيار الجمالية – أنها يمكن أن يكون لها تأثير كبير على موقعك معدلات الارتداد و معدلات التحويل ، وخاصة إذا اخترت الخط الذي من الصعب قراءتها. لذلك ، من المفيد أن تأخذ بعض الوقت لاختيار عائلة Google Fonts المثالية لموقع الويب الخاص بك ، بدلاً من استخدام الخط الأول الذي تصادفه.
إذا كنت بحاجة إلى المزيد من الخطوط ، فراجع منشورنا على أكثر من 50 خطًا حديثًا لاستخدامها على موقع وورد بريس الخاص بك .
هناك الآلاف من مستودعات الخطوط على الإنترنت ، فما الذي يجعل Google Fonts مميزة جدًا؟
كتالوج خطوط جوجل.
كتالوج خطوط جوجل.
أولاً ، إنه مجاني! علاوة على ذلك ، يتم صيانة وتسليم خطوط Google بواسطة Google ، مما يعني أنها مضمونة لتكون آمنة. بالطبع ، هناك الكثير من مواقع الويب المراوغة حيث يمكنك تنزيل خطوط مجانية ، ولكن من يدري ما الذي ستلتقطه أيضًا بهذه الملفات؟
قد تكون جودة الخطوط على هذه المواقع موضع شك أيضًا في بعض الأحيان.
قامت Google برعاية مجموعة مختارة من أكثر من ألف خط عالي الجودة. عندما لا تكون مصمم جرافيك ولديك عين مثالية للطباعة ، فهو خيار أكثر أمانًا.
ثانيًا ، لا توجد قيود ترخيص معقدة. جميع الخطوط في كتالوج Google Fonts مفتوحة المصدر ومجانية للاستخدام في المشاريع التجارية. يمكنك تنزيلها أو تضمينها على موقعك ، ويمكنك حتى استخدامها في مشاريع الطباعة.
على الرغم من عدم وجود ترخيص موحد ، فإن معظم الخطوط في المستودع تستخدم ترخيص Open Font .
افتح ترخيص الخط.
افتح ترخيص الخط.
نادرًا ما تكون “الخطوط المجانية” الأخرى مجانية وتأتي مع مجموعة كاملة من قيود الترخيص المربكة التي قد تؤدي بك إلى الماء الساخن إذا ارتكبت خطأً. لسوء الحظ ، لا تأتي خطوط Google مع نفس الأمتعة.
وأخيرًا ، من السهل إضافة خطوط Google إلى موقع الويب الخاص بك باستخدام Google Fonts API . بدلاً من ذلك ، يمكنك تنزيلها بشكل فردي وتحميلها على خادم الويب الخاص بك عبر FTP / SFTP .
بينما تميل Google Fonts إلى أن تكون بسيطة وربما ليست براقة مثل بعض الخطوط المدفوعة ، إلا أنها تتفوق بالتأكيد على الخطوط الآمنة للويب التي تأتي مثبتة مسبقًا مع أنظمة التشغيل الرئيسية ، وهي الخطوط نفسها التي شاهدها الجميع آلاف المرات من قبل.
هناك 1052 مجموعة مختلفة من خطوط Google متاحة مجانًا … هل تشعر بالإرهاق حتى الآن؟ 🤯 تضييق نطاق اختياراتك بمساعدة هذا المنشور 👇
انقر للتغريد
إذا كان هناك شيء واحد يجب أن تتعلمه عند تصميم موقع ويب ، فهو كيفية اختيار خط Google المناسب لمشروعك. ستؤدي الطباعة الجيدة إلى إنشاء موقعك أو كسره.
قد يبدو الأمر وكأنه تفاصيل غير مهمة ، ولكن يمكن أن يكون الفرق بين مغادرة شخص ما لموقعك مبكرًا أو البقاء في مكانه ليصبح قارئًا أو عميلًا مخلصًا.
يعد اختيار الخط الصحيح أمرًا يقضي مصممو الرسوم سنوات في إتقانه ، ولكن مع مراعاة بعض المبادئ ، يمكنك اختيار خط جميل لموقع الويب الخاص بك.
يناسب علامتك التجارية: قد يكون هذا هو الجانب الأكثر أهمية. تحتوي أفضل مواقع الويب على خط يُظهر شخصيتها بينما يظل قابلاً للقراءة ويتناسب مع التصميم الحالي. على سبيل المثال ، تستخدم Apple و Iron Maiden خطوطًا مختلفة إلى حد كبير ، لكن كلاهما يناسب علامتهما التجارية.
المقروئية: ثاني أهم مبدأ هو قابلية القراءة. من المؤكد أن الخط الخيالي أو الخط الجرونج قد يناسب علامتك التجارية ، ولكن إذا لم يتمكن زوارك من قراءتها ، فسوف يسارعون إلى المغادرة. لذلك ، يجب أن تكون خطوطك احترافية ومقروءة.
تصنيف الخط: في حين أن هناك مئات الطرق لتصنيف الخط ، فهذه هي الأنواع الخمسة الرئيسية: serif و sans-serif و script و monospace و Decorative. ينقل الخط النصي أو الخط الرقيق الأناقة ، بينما تحظى خطوط monospace بشعبية في المواقع التقنية. ستمنحك معرفة هذه التصنيفات نقطة انطلاق أفضل في بحثك.
العرض أو الخط الأساسي: خطوط العرض مخصصة للأحجام الكبيرة أو الرؤوس أو مشاريع الطباعة. يمكنهم أن يكونوا أقل وضوحًا من أجل التصميم الفريد. التوجيه الأساسي لخطوط Body هو قابلية القراءة ، لأنها ستشكل الجزء الأكبر من موقعك.
الحالة المزاجية والنية: تمامًا مثل أي عمل فني ، يقوم الفنانون بتصميم الخطوط لأمزجة وإعدادات محددة. تأتي معظم الخطوط مصحوبة بملاحظات حول كيفية تصميمها وكيفية استخدامها. استخدمها لتحديد ما إذا كان الخط يناسب مشروعك.
لذا ، كيف يمكنك تطوير قائمة بأفضل خطوط Google في حين أن الكثير من هذا أمر شخصي؟ لا نريد أن تكون هذه القائمة بأكملها متحيزة ، لذلك سنذهب مع البيانات لإنشاء قائمة بأكثر خطوط Google شيوعًا.
سنستخدم Google Fonts analytics للثقة في حكمة الجماهير. مع أكثر من 50 تريليون مشاهدة للخط ، فإن Google لديها القليل من البيانات لسحبها منها.
بعد ذلك ، سنذهب إلى ما هو أبعد من أرقام الشعبية الأولية ونختار بعض خطوط HTML الحديثة التي تكتسب شعبية.
مستعد؟ دعنا نتعمق!
روبوتو.
روبوتو.
يعد Roboto ، المكان الأول منذ فترة طويلة والخط المفضل لدى Kinsta ، عرضًا من sans-serif من Christian Robertson طورته Google كخط نظام لنظام Android. أصبح الآن شائعًا على نطاق واسع ، ويأتي في 12 نمطًا مختلفًا ، ويظهر عدة مرات في تحليلات Google Fonts.
على سبيل المثال ، يعد Roboto الخط الأكثر شيوعًا. لكن Roboto Condensed هو أيضًا سادس أكثر الخطوط شيوعًا ، كما يظهر Roboto Slab في المرتبة 12!
افتح Sans.
افتح Sans.
Open Sans Condensed هو خط مقروء للغاية بتكليف من Google ومستوحى من سابقتها Droid Sans. تستخدم Google Open Sans على بعض مواقعها الإلكترونية وإعلاناتها المطبوعة والويب . Open Sans Condensed ، الخط الشقيق هنا ، يحتل أيضًا المركز الثالث عشر الأكثر شيوعًا على Google Fonts.
لاتو.
لاتو.
Lato هو خيار شائع آخر من Łukasz Dziedzic. لديه قصة كاملة وراء تصميمه ، حيث يوازن بين الأهداف المتضاربة ، مما ينتج عنه خط sans-serif فريد وخفيف الوزن.
Monstserrat.
Monstserrat.
مونتسيرات هو خط بلا خط من جولييتا أولانوفسكي ، التي تعيش في حي مونتسيرات الذي يحمل الاسم نفسه في بوينس آيرس. مع 18 نمطًا مختلفًا تتراوح من الخفيف إلى الثقيل ، لديك الكثير من الخيارات.
أوزوالد.
أوزوالد.
Oswald هو خط sans-serif تم تطويره في الأصل بواسطة Vernon Adams. تم تصميمه مع وضع النمط القوطي البديل المتميز في الاعتبار ، والذي يتضح من خلال ضرباته الجريئة.
مصدر Sans Pro.
مصدر Sans Pro.
Source Sans Pro هو خط sans-serif تم إنشاؤه لخط Adobe وأول خط مفتوح المصدر من Adobe. من صنع Paul Hunt ، تجعل الحروف الخفيفة منه واضحة وسهلة القراءة.
سلابو.
سلابو.
Slabo هو خط Serif تم تطويره بواسطة John Hudson من Tiro Typeworks. تم تصميم هذا الخط خصيصًا لأحجام معينة – إما 27 بكسل أو 13 بكسل ، حسب احتياجاتك.
راليواي
راليواي
مع 18 نمطًا مختلفًا ، يعد Raleway خطًا آخر من خطوط sans-serif للعائلة الكبيرة ، تم إنشاؤه في البداية بواسطة Matt McInerney. إذا كنت تحب Raleway وتبحث عن شيء فريد من نوعه ، فإن Raleway Dots تقدم تصميمًا مشابهًا بنهج منقط يمكن أن يعمل مع العناوين الرئيسية .
بي تي سانس.
بي تي سانس.
تم تطوير PT Sans للأنواع العامة في الاتحاد الروسي ، وعلى هذا النحو ، يتضمن كلا من الأحرف اللاتينية والسيريلية. هناك أيضًا العديد من الخطوط الأخرى في عائلة PT ، بما في ذلك بعض خيارات serif.
ميريويذر.
ميريويذر.
Merriweather في اسم يستحضر فكرة تصميم لطيف، وهذا هو بالضبط ما يقصد مصمميها. على الرغم من أن Merriweather Sans لا يتمتع بشعبية كبيرة ، إلا أنه مشروع شقيق يتزاوج معه بشكل جيد للغاية.
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
بالأرقام ، الخطوط العشرة أعلاه هي أشهر خطوط Google. لكن عرض الخيارات الأكثر شيوعًا فقط يضر بالخطوط الرائعة الصاعدة التي لم تتعرض للتعرض للظهور في التحليلات.
فيما يلي بعض العناصر المفضلة التي لم تظهر في الجزء العلوي من التحليلات.
Noto Sans / Serif.
Noto Sans / Serif.
Noto هو خط بتكليف من Google ويأتي في كل من إصدارات serif و sans-serif. يتلقى تحديثات منتظمة ، ويوجد الآن أكثر من 100 خط Noto ، مع المزيد في كل وقت!
هدف Noto هو تغطية جميع الحروف الهجائية والشخصيات من لغات مختلفة بينما يتناغم تصميمها المميز عبر مئات من مجموعات الخطوط المختلفة. تشمل هذه المشتقات Noto Sans KR و Noto Sans JP .
نونيتو سانس.
نونيتو سانس.
Nunito Sans هو خيار من خيارات sans-serif تزداد شعبيته بسرعة. تضاعف استخدامه ثلاث مرات بين عامي 2018 و 2019 ، وأصبح أكثر شيوعًا كل عام.
حفلة موسيقية واحدة.
حفلة موسيقية واحدة.
Concert One هو شكل محرف مستدير غريب يجعل خيارًا ممتازًا للعناوين الرئيسية. من المؤكد أن تصميمه غير التقليدي سوف يلفت الأنظار.
مستعجل.
مستعجل.
Prompt هو عرض sans-serif من شركة تصميم الاتصالات التايلاندية Cadson Demak. إنه بلا حلق (المكافئ التايلاندي لـ sans-serif) ويتضمن كلا من الأحرف التايلاندية واللاتينية.
عمل بلا.
عمل بلا.
Work Sans هو خط sans-serif محسن للاستخدام على الشاشات. يوصي المصممون باستخدام أنماط الوزن المتوسط لأي شيء يتراوح من 14 بكسل إلى 48 بكسل.
إذا كنت تعتقد أن محاولة اختيار خط واحد من Google Fonts كانت صعبة ، فانتظر حتى تحاول إقرانهما على موقعك! لحسن الحظ ، هذه ليست مشكلة يجب عليك حلها (إلا إذا كنت تريد ذلك). يمكنك استخدام طريقتين للتوصل إلى أفضل مجموعات خطوط Google.
هل تحتاج إلى استضافة سريعة وموثوقة وآمنة تمامًا لموقع الويب الخاص بك على وورد بريس؟ يوفر Kinsta كل هذا ودعمًا عالميًا على مدار الساعة طوال أيام الأسبوع من خبراء وورد بريس. تحقق من خططنا
أولاً ، سيقترح موقع Google Fonts نفسه عمليات الاقتران الشائعة إذا قمت بالتمرير لأسفل الصفحة:
اكتشاف أزواج خطوط Google الشائعة.
اكتشاف أزواج خطوط Google الشائعة.
علاوة على ذلك ، يمكنك أيضًا استخدام موقع مثل Font Pair للحصول على مزيد من الاقتراحات.
بمجرد العثور على الخطوط المثالية لمشروعك ، إليك بعض أفضل الممارسات لاستخدام خطوط Google على وورد بريس.
حدد عدد أوزان الخطوط التي تستخدمها
بعض هذه الخطوط – مثل Montserrat و Raleway – تأتي مع 18 وزنًا مختلفًا للخط. في حين أن هذا أمر جيد لإعطائك خيارات ، إلا أنك لا تريد تحميل جميع الأوزان الـ 18 على موقع وورد بريس الخاص بك لأنه سيبطئ أوقات التحميل .
اتباع هذا الدليل الإرشادي مهم جدًا!
بالنسبة لمعظم الخطوط ، تتمثل القاعدة العامة الجيدة في استخدام ثلاثة أوزان كحد أقصى:
عادي
مائل
عريض
العديد من مواقع وورد بريس التي نراها في الوقت الحاضر تتخطى الخط المائل وتنتقل فقط بوزن خطين مختلفين.
إذا كنت تقوم بتضمين Google Fonts بنفسك ، فيمكنك اختيار الأوزان التي تريد تضمينها بالضبط. أولاً ، قم بزيارة صفحة الخط ثم انقر فوق تحديد هذا النمط بجوار تلك التي تريدها.
اختيار الخط في Google Fonts.
اختيار الخط في Google Fonts.
تتضمن معظم سمات وورد بريس اليوم طرقًا سهلة لاختيار خطوط Google والأوزان التي تريد استخدامها. ولكن ليس كل مطوري السمات يركزون على الأداء. لذلك في بعض الحالات ، قد يكون من الأفضل تعطيل خطوط Google في المظهر الخاص بك وإضافتها بنفسك .
بدأت الخطوط المتغيرة أيضًا في الانتشار وهي مدعومة من قبل جميع المتصفحات الحديثة. هذه رائعة لأنها تسمح لملف خط واحد بالتحويل بخصائص مختلفة. تحتوي Google Fonts على الكثير من الخطوط المتغيرة للاختيار من بينها ، ويمكنك حتى تضييق نطاق البحث على تلك الخطوط تحديدًا.
“ضبط
كبديل لتقديم الخطوط من خادم Google ، يمكنك أيضًا استضافة الخطوط محليًا ، مما يوفر مزايا الأداء . ومع ذلك ، تذكر أن معظم خطوط Google ربما تكون مخزنة في ذاكرة التخزين المؤقت بالفعل في متصفحات الأشخاص. لذلك نوصي بإجراء اختبارات الأداء الخاصة بك.
إذا كنت تستخدم خطًا متميزًا بخلاف خطوط Google ، مثل خط “Brandon” الذي نستخدمه على موقع Kinsta الخاص بنا ، فإن استضافتها محليًا (وتقديمها من CDN الخاص بك) هو أفضل طريق. لمزيد من المعلومات حول هذا الموضوع ، تحقق من منشوراتنا حول كيفية استضافة الخطوط محليًا .
الخطوط تشبه تمامًا المكونات الإضافية والسمات في وورد بريس – بمرور الوقت ، تتلقى تحديثات وتحسينات لجعلها أفضل. وعلى الرغم من أن المخاطر ليست بنفس خطورة مكونات وورد بريس الإضافية ، إلا أنه لا يزال من المفيد اختيار خط يتلقى تحديثات منتظمة. على سبيل المثال ، حصلت عائلة Noto من Google على تحديثات منتظمة منذ عام 2014.
نظرًا لأن معظم الخطوط الموجودة في هذه القائمة شائعة ، فمن المحتمل أن يكون رهانًا جيدًا أن أي خط في هذه القائمة سيتلقى تحديثات وتحسينات منتظمة. وإذا قررت الخروج من القائمة ، فتأكد من أن الخط الذي تختاره شائعًا بما يكفي لجذب الانتباه ليس فكرة سيئة أبدًا.
وفقًا لمنظمة الصحة العالمية ، وفقًا للبيانات التي تم جمعها في عام 2015 ، هناك ما يقدر بنحو 253 مليون شخص يعانون من ضعف البصر : 36 مليونًا كفيفًا ، و 217 مليونًا يعانون من ضعف البصر المتوسط إلى الشديد. بالإضافة إلى ذلك ، ارتفع عدد الأشخاص الذين يعانون من شكل من أشكال الإعاقة إلى 2.2 مليار اعتبارًا من عام 2021.
عند استخدام Google Fonts ، يمكنك التحكم في كيفية ظهورها باستخدام CSS ، مثل اللون والحجم. لذلك لا تنس اتباع إرشادات الوصول إلى محتوى الويب (WCAG) 2.0 . سيضمن ذلك سهولة الوصول إلى المحتوى الخاص بك للجميع.
سيؤدي اتباع هذه الإرشادات إلى إتاحة الوصول إلى المحتوى لمجموعة أكبر من الأشخاص ذوي الإعاقة ، بما في ذلك العمى وضعف البصر والصمم وفقدان السمع وصعوبات التعلم والقيود المعرفية ومحدودية الحركة وإعاقات النطق والحساسية للضوء ومجموعات من هذه. – إرشادات الوصول إلى محتوى الويب (WCAG) 2.0
أحد المبادئ التوجيهية الهامة هو تباين الألوان. كان خطنا خفيفًا جدًا على التصميم القديم لموقع Kinsta على الويب ، وقد عبر الزائرون عن مخاوفهم لأنه جعل من الصعب قراءته. آخر شيء تريد القيام به هو نشر محتوى مذهل ، فقط حتى يصبح ضغطًا على عيون الناس!
يمكنك استخدام أداة مثل Color Contrast Checker من WebAIM لمعرفة ما إذا كانت ألوان خطك تجتاز التوصيات الرسمية. على سبيل المثال ، يمكنك أن ترى أن الألوان الموجودة في مشاركات المدونة الخاصة بنا قد اجتازت الاختبار الآن. 👍
أداة مدقق تباين الألوان.
أداة مدقق تباين الألوان.
مع اختيار خط أو خطين ، فإن الخطوة الأخيرة هي إضافته إلى موقع الويب الخاص بك. بفضل Google Fonts ، أصبحت هذه المهمة أسهل من المعتاد.
لنفترض أنك تريد الحصول على خط على موقع الويب الخاص بك. في هذه الحالة ، لديك ثلاثة خيارات: تثبيت مكون إضافي مثل Easy Google Fonts أو Google Fonts Typography ، أو استخدام Google Fonts API لتحميل الخط إلى موقعك ، أو تنزيله يدويًا واستضافته على موقع الويب الخاص بك.
إذا كنت بحاجة إلى معرفة كيفية تغيير الخطوط الخاصة بك في وورد بريس ، فقد كتبنا دليلاً مفصلاً لمساعدتك.
يعد اختيار الخط أكثر من مجرد اختيار جمالي – يمكن أن يكون له تأثير كبير على معدلات الارتداد ومعدلات التحويل بموقعك 😲 ابدأ هنا ⬇️
انقر للتغريد
تعد Google Fonts رائعة ويستخدمها ملايين مواقع الويب. إنها تجعل الويب أكثر متعة وانفتاحًا وسرعة وسهولة الوصول إليها من خلال مبادئ الطباعة والأيقونات الصلبة.
لضمان تجربة شاملة أفضل للزائرين ، نوصيك باتباع أفضل ممارسات الخطوط مثل الحد من أوزان الخطوط ، واستضافة الخطوط محليًا (إذا لزم الأمر) ، والالتزام بإرشادات الوصول.
