اذا كنت تمتلك موقع متعدد اللغات وخاصة اذا كانت اللغات هي الإنجليزية والعربية فستحتاج أن يظهر المحتوي في كل لغة بفونت مختلف.
في هذا الفيديو، سأشرح لك بالتفصيل كيف تقوم بتغيير الفونت بناء علي اللغة. وأيضا سيتم الأخذ في الاعتبار تطبيق الطريقة المثلي للحفاظ علي سرعة الموقع وتفادي الأخطاء التي تظهر سواء في PageSpeed Insights او GTMetrix.
الكود المستخدم:
برجاء ملاحظة أنه يجب عليك تغيير الدومين الخاص بك وأيضا اسم الفونت ومكان الحفظ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@font-face { font-family: 'Almarai-Regular'; src: url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Regular.eot'); /* IE9 Compat Modes */ src: local(''), url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Regular.woff') format('woff'), /* Modern Browsers */ url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Regular.svg') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Almarai-Bold'; src: url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Bold.eot'); /* IE9 Compat Modes */ src: local(''), url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Bold.woff2') format('woff2'), /* Super Modern Browsers */ url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Bold.woff') format('woff'), /* Modern Browsers */ url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://nagdyme.b-cdn.net/wp-content/uploads/site-fonts/Almarai-Bold.svg') format('svg'); /* Legacy iOS */ font-display: swap; } body{ font-family: 'Almarai-Regular'; } h1,h2,h3,h4,h5,h6 { font-family: 'Almarai-Bold'; } |
شرح ممتاز وبسيط، سلمت يداك
مبسوط ان الموضوع عجبك، شكرا نزار!
بعد اذنك يا بشمهندس انا جربت الموضوع على ثيم استرا على صفحة معمولة ب elementor ومتشتغلش الخط ممكن الحل ؟
ثانيا انا مش لاقى اصلا ملف rtl.css داخل قالب astra
خلاص لقيت مكان الفونت كان مكانه متغير وعرفت اتعامل معاه الحمد لله . الحمد لله المشكلة اتحلت 🙂
شرح رائع ومفيد أشكرك جداً
لكن لدي سؤال:
يوجد مع بعض الثيمات فونتات قوقل كاملة 965 فونت ازاي ألغي طلب الفونتات ده تماما ، اي الثيم لايحمل هذه الفونتات برابط او غيره
لما اعمل فحص للصفحة على أي أداة اختبار للصفحة مش يعطيني تنبيه على خطوط قوقل…
بسام باشا 🙂
مادام انت مش مستخدم للفونتات دي، فالثيم مش هيحمل الفونتات دي. ولو حملهم هتبقي مشكلة كبيرة جدا في الثيم وهيحتاجوا يحلوها.
انت لو اتبعت الطريقة المشروحة هنا، هتتخلص من اي فونتات تانية وهتستخدم الفونتات اللي انت اخترتها وحابب تستخدمها بس.