تلعب الخطوط دورا مهما في تصميم مواقع الويب. أنها تساعد على خلق أسلوب فريد من نوعه والتأكيد على الفردية للمشروع. واحدة من مصادر الخط الأكثر شعبية ومريحة هي خطوط جوجل.
تقدم خطوط جوجل عددا كبيرا من الخطوط المجانية التي يمكنك استخدامها على موقع الويب الخاص بك. فهي ذات جودة عالية ، وسهلة التركيب ، ودعم عبر المتصفح. بالإضافة إلى ذلك ، يعد استخدام خطوط جوجل على الموقع اختيارا ممتازا من حيث تحسين وتسريع تحميل الصفحة.
لإضافة خط جوجل إلى موقع الويب الخاص بك ، تحتاج إلى اتباع بعض الخطوات البسيطة. أولا ، تحتاج إلى تحديد الخط المطلوب على موقع جوجل الخطوط الرسمي. ثم تحتاج إلى نسخ رمز اتصال الخط وإضافته إلى صفحة الويب الخاصة بك. بعد ذلك ، كل ما تبقى هو تطبيق الخط المحدد على عناصر الموقع باستخدام كس.
ملاحظة: بالنسبة للمستخدمين الأكثر تقدما ، من الممكن تخصيص إعدادات خط إضافية مثل الوزن والأسلوب والحجم.
الآن أنت تعرف كيفية بسرعة وسهولة تخصيص الخطوط جوجل على موقع الويب الخاص بك. لا تخف من التجربة واختيار الخطوط التي تناسب مشروعك بالضبط. إنشاء تصميم فريد من نوعه وتنسى باستخدام الخطوط الخطوط جوجل مجانا!
- ربط الخطوط جوجل إلى موقع على شبكة الانترنت مع الحد الأدنى من الجهد
- اختيار الخطوط من مكتبة الخطوط جوجل
- الحصول على رمز لتوصيل الخطوط
- ربط الخطوط على موقعك
- تخصيص الخطوط لعناصر مختلفة من الموقع
ربط الخطوط جوجل إلى موقع على شبكة الانترنت مع الحد الأدنى من الجهد
تقدم جوجل الخطوط مجموعة كبيرة من الخطوط لاستخدامها على موقع الويب الخاص بك. يعد توصيل هذه الخطوط واستخدامها أمرا بسيطا للغاية ، وهنا سنوضح لك كيفية القيام بذلك بأقل جهد ممكن.
1. انتقل إلى موقع جوجل الخطوط (https://fonts.جوجل .كوم/) ، حيث يمكنك العثور على جميع الخطوط المتاحة.
2. ابحث عن الخط الذي تريد استخدامه على موقع الويب الخاص بك. للقيام بذلك ، يمكنك استخدام المرشحات والبحث على موقع جوجل الخطوط.
3. بعد تحديد الخط ، انقر فوق الزر" تحديد هذا الخط " بجوار الخط المحدد. ثم انقر فوق الزر" فتح عائلة الخطوط " في شريط الأدوات السفلي.
4. في صفحة اختيار الخط ، سترى علامات التبويب" قياسي "و" الأوزان والأنماط القياسية "و" الأحجام القياسية "و"الإعدادات القياسية". يمكنك تخصيص هذه الإعدادات وفقا لتفضيلاتك ومتطلباتك. بالنسبة لمعظم المستخدمين ، يجب أن تكون الإعدادات القياسية مناسبة.
5. بعد الانتهاء من الإعدادات ، قم بالتمرير لأسفل الصفحة وسترى مثالا على رمز توصيل الخط بموقعك. المثال سوف تبدو شيئا من هذا القبيل:
6. انسخ هذا الرمز والصقه في قسم مستند هتمل.
7. الآن يمكنك استخدام الخط الذي تختاره على موقع الويب الخاص بك. للقيام بذلك ، تحتاج فقط إلى تحديد هذا الخط في خصائص كس للعناصر المقابلة على موقعك ، على سبيل المثال:
الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
وهذا كل شيء! الآن قمت بتوصيل الخط جوجل إلى موقع الويب الخاص بك مع الحد الأدنى من الجهد. استمتع بالخط الأنيق الجديد على موقع الويب الخاص بك!
اختيار الخطوط من مكتبة الخطوط جوجل
1. انتقل إلى موقع جوجل الخطوط في https://fonts.google.com /.
2. تصفح الخطوط المتاحة وحدد الخطوط التي تريدها. يمكنك تصفية الخطوط حسب معايير مختلفة مثل النمط والوزن واللغة.
3. بعد تحديد الخطوط ، انقر فوق الزر" تحديد هذا الخط " بجوار كل خط محدد.
4. بعد تحديد جميع الخطوط الضرورية ، انتقل إلى أسفل الصفحة وانقر على زر "تضمين". سيتم إنشاء رمز تضمين الخطوط على موقعك تلقائيا.
5. انسخ الكود الذي تم إنشاؤه والصقه في قسم مستند هتمل قبل علامة الإغلاق. سيضمن ذلك توصيل الخطوط المحددة بموقعك.
6. حفظ وتحديث موقع الويب الخاص بك. الآن سيتم استخدام الخطوط المحددة من خطوط جوجل على موقعك.
الآن يمكنك تخصيص الخطوط على موقع الويب الخاص بك عن طريق اختيار وتضمين الخطوط من مكتبة الخطوط جوجل. هذا سيجعل موقعك أكثر جاذبية وشخصية.
الحصول على رمز لتوصيل الخطوط
من أجل استخدام خطوط جوجل على موقعك ، تحتاج إلى الحصول على رمز ارتباط خاص. يمكن الحصول على هذا الرمز بسهولة على الموقع الرسمي لخطوط جوجل.
1. انتقل إلى موقع جوجل الخطوط عن طريق فتحه في المتصفح.
2. حدد الخطوط التي تريد استخدامها على موقعك. يمكنك تحديد خط واحد أو أكثر.
3. بعد تحديد الخطوط ، سيتم عرض رمز ارتباط خاص في أسفل الصفحة. انقر على أيقونة" تخصيص " للوصول إلى إعدادات الخط المختلفة مثل مخطط الخط والحجم واللون.
4. انسخ رمز الارتباط الناتج والصقه في كود هتمل لموقعك. يوصى بإدخال هذا الرمز داخل القسم.
بعد توصيل رمز الارتباط ، ستتم إضافة الخطوط التي حددتها إلى موقعك ، ويمكنك استخدامها كخط رئيسي أو لتمييز عناصر معينة على الصفحة.
ربط الخطوط على موقعك
يوفر جوجل خدمة دعم الخطوط المجانية التي تسمح لك لاستخدام مجموعة متنوعة من الخطوط على موقع الويب الخاص بك دون الحاجة إلى تحميل وتثبيتها على الخادم الخاص بك. لتوصيل خطوط جوجل على موقعك ، تحتاج إلى اتباع بعض الخطوات البسيطة.
- اختيار الخط على موقع جوجل الخطوط التي تريد ومناسبة لموقع الويب الخاص بك.
- في صفحة الخط ، انقر فوق الزر" تحديد هذا الخط".
- حدد إعدادات الخط الضرورية ، مثل نوع الخط ودعم اللغة والخيارات الأخرى.
- نسخ رمز المغلق ولدت ولصقه في موقع الويب الخاص بك بين العلامات و .
- قم بتطبيق الخط المحدد على العناصر المطلوبة على موقعك باستخدام خاصية كس"عائلة الخط".
بهذه الطريقة ، يمكنك بسرعة وسهولة تخصيص الخطوط جوجل على موقع الويب الخاص بك وجعلها أكثر جاذبية وفريدة من نوعها. تسهل هذه الطريقة التحكم في مظهر النص الخاص بك وإنشاء مجموعات خطوط متناغمة للمحتوى الخاص بك.
تخصيص الخطوط لعناصر مختلفة من الموقع
تقدم خطوط جوجل مجموعة واسعة من أنماط الخطوط والخيارات التي يمكنك استخدامها على موقعك. فيما يلي أمثلة على عناصر الموقع المختلفة وطرق تخصيص الخطوط لكل منها باستخدام خطوط جوجل:
1. العناوين
بالنسبة للعناوين الرئيسية ، يمكنك اختيار خطوط أكثر تعبيرا تجذب انتباه القارئ. على سبيل المثال ، يمكنك استخدام خط" مونتسيرات " للعناوين عن طريق تعيينه في كس على النحو التالي:
"'المغلق
ح1 ، ح2 ، ح3 {
الخط الأسرة: 'مونتسيرات' ، بلا الرقيق;
}
2. الفقرات
بالنسبة للفقرات ، من الملائم استخدام خطوط قابلة للقراءة ومتعددة الاستخدامات مثل "روبوتو" أو "فتح بلا". هذه الخطوط مناسبة تماما للكتل النصية الطويلة. لتخصيص الخطوط للفقرات ، إضافة التعليمات البرمجية التالية إلى المغلق:
"'المغلق
ص {
الخط الأسرة: 'روبوتو' ، بلا الرقيق;
}
3. الروابط
بالنسبة للروابط ، يمكنك استخدام خطوط التمييز التي تجذب انتباه المستخدم وستكون سهلة القراءة. على سبيل المثال ، يمكنك استخدام خط" لاتو " للروابط وتكوينه على النحو التالي:
"'المغلق
أ {
الخط الأسرة: 'لاتو' ، بلا الرقيق;
}
4. العناوين في القائمة
إذا كان موقعك يحتوي على قائمة أفقية أو رأسية ، فيمكنك اختيار خطوط أكثر جرأة وأنيقة للعناوين في القائمة. على سبيل المثال ، بالنسبة للعناوين في القائمة ، يمكنك استخدام الخط "أوزوالد" وتعيينه في كس:
"'المغلق
.الملاحة {
الخط الأسرة: 'أوزوالد' ، بلا الرقيق;
}
هذه ليست سوى بعض الأمثلة على كيفية تخصيص الخطوط لعناصر مختلفة على موقعك باستخدام خطوط جوجل. تذكر أنه يمكنك دائما اختيار الخطوط التي تتناسب بشكل أفضل مع مظهر موقعك والغرض منه.