Google Fonts هي بلا شك واحدة من أكثر المصادر القيمة ، ويرجع ذلك أساسًا إلى طبيعة المصادر المفتوحة لخطوطها ، والتي تتيح الاستخدام الشخصي والتجاري. بالإضافة إلى ذلك نوعية متنوعه كثيرة جداً و تتميز بـ وضوح و سهولة القراءة.
Google Fonts أصبحت الآن مصدراً قيم من أي وقت مضى. تتميز بواجهه مرنة وسهله ، ويمكنك المقارنة جميع الخطوط والأنماط المتوفرة لتلبية أحتياجك الإبداعي الذي يدمج بين تنوع أوزان الخطوط العريضة والخطوط الرفيعه والعرض والفقرات الكبيرة والأنماط الزخرفية.
إليك أفضل 20 خط من Google Web Fonts
Karla
Lora
Frank Ruhl Libre
Playfair Display
Archivo
Spectral
Fjalla One
Roboto
Montserrat
Rubik
Source Sans
Cardo
Cormorant
Work Sans
Rakkas
Concert One
Yatra One
Arvo
Lato
Abril FatFace
Ubuntu
PT Serif
Old Standard TT
Oswald
أفضل الخطوط المستخدمة في واجهه المستخدم UI
PT Sans
Poppins
Fira Sans
Nunito
Oxygen
Exo 2
Open Sans
Merriweather
Noto Sans
Source Sans Pro
كيفية استخدام خطوط الويب
- في هذه المرحلة ، يجب عليك معرفة كيفية استخدام خطوط الويب ،هناك طريقتين يمكنك الأستفاده منها لخطوط الويب. الأول هو أستخدام خدمات الخطوط على شبكة الإنترنت مثل خطوط Google ، Webtype ، Fonts.com أو Typekit وتحميل الخط من موقعهم.
- والثاني هو استضافة الخط في موقعك و استخدام @font-face في كود البرمجي لموقعك.
طريقة استخدام الخطوط بالطريقة الأولى
1. اختيار الخط. يمكنك إضافته إلى موقعك “الاستخدام السريع” لإنشاء الكود البرمجي وخيارات هذا الخط.
2. قم بنسخ الكود البرمجي التي تم إنشاؤه في <head> ولصقها.
<head> <link rel = "stylesheet" type = "text / css" href = "http://fonts.googleapis.com/css؟family=Tangerine" > </ head>
3. يمكن الآن تعديل عرض الخط من خلال CSS الخاصة بك
body { font-family: 'Tangerine', serif; font-size: 48px; }
يمكنك هنا مراجعة دليل الموسع لاستخدام خطوط متعددة.
تضمين الخطوط باستخدام font-face rule@
يتم استضافة الخطوط على خادم المستخدم بشكل مستقل عن الخدمات الخارجية. @ font-face كان قاعدة CSS2 تم إيقافها وتمت إعادة تعريفها في مواصفات CSS3 وهي مدعومة من قبل جميع المتصفحات الحديثة تقريبًا. يعد خط الويب خطًا مخصصًا مدعومًا بمخازن مختلفة ويأتي بتنسيقات مثل TTF و WOFF و EOT و SVG.
@font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }