مشكلة: متصفح الفيرفوكس مع خطوط الويب ..

 بسم الله والحمدلله والصلاة على رسول الله وآل بيته وصحبه الكرام

في التدوينة السابقة تكلمنا عن تطبيق خطوط الويب في مدونات بلوقر، وانتهينا الى مشكلة في متصفح فيرفوكس الشهير حيث لا يعرض خطوط الويب المحفوظة في موقع آخر وهي سياسة لموزيلا يبدو أنها لن تتغير فحتى الإصدار الأخير ( 13 ) الذي أطلق قبل ساعات ما زال محتفظاً بهذه السياسة التي حقاً لا أجد لها مبرراً مقنعاً. في هذه التدوينة لن يكون هناك حل إلا بالتماشي مع هذه السياسة فلا سبيل للتحايل عليها وترويض هذا الثعلب الملتهب! ولكن سنسلك طريقاً آخر ...

نظام التحكم بتصاريح العبور للمواقع الخارجية

فيرفوكس سيعرض الخط إذا سمح صاحب الموقع الذي يحتفظ بهذا الخط لمدونتك باستخدامه بصورة واضحة ، وكيف يكون هذا ؟ . عن طريق نظام [ Cross-Origin Resource Sharing ] ، نظام التحكم بمشاركة موقع خارجي روابط مواد من الموقع الأصلي. سنعطي من خلال هذا النظام تصريح عبور لرابط خط الويب في الموقع الأصلي ( مستضيف الخط )  ليعرض في الموقع الخارجي وهو مدونة بلوقر ( المستفيد ) . وستتم هذه العملية إن شاء الله بكتابة أوامر في ملف خاص له اسم واحد لا يتغير وهو (htaccess) نضعه بجوار ملفات الخطوط وستكون النتيجة قبول متصفح فيرفوكس عرضها بدون مشاكل.

طريقة اعطاء التصريح للخطوط بواسطة ملف htaccess

ملف  htaccess.  مشهور وغني عن التعريف كما يقال وهناك معلومات مستفيضة حوله ، وعلى أي حال هذا الملف هو عبارة حارس لملفات الموقع الأصلي فيمنع مثلاً استخدام صور الموقع الاصلي في المواقع الخارجية ويستبدلها بصورة تحذيريه أو دعائية! ، في قضيتنا الحالية سنقوم بإعطاء تصريح لمدونة بلوقر من خلال رفع ملف  htaccess. في مجلد الخطوط في الموقع المستضيف لها، وسنكتب في هذا الملف أوامر لاعطاء الخطوط تصريح عبور بلا قيد أو شرط :

الطريقة :
نفتح برنامج النوتباد ونكتب فيه الأمر ثم نحفظه باسم [ htaccess.] بدون امتداد على النحو التالي:

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

الأمر السابق يعطي حق استخدام الخط لكل العالم! ، إذا كنت تريد اعطاء تصريح العبور للخطوط لمدونتك فقط دون غيرها فسنكتبه على النحو :

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
    Access-Control-Allow-Origin: http://your.blogspot.com
</IfModule>
</FilesMatch>

← تسهيلاً يمكنك تنزيل ملف htaccess. وهو جاهز للاستخدام من هنا .

أين أجد مستضيف لخطوط الويب لربطها بمدونة بلوقر ؟

   يشترط في الموقع المستضيف دعم خاصية اعطاء تصريح الربط للمدونة، للأسف مواقع مثل dropbox و google code وغيرها لا تدعم خاصية اعطاء تصريح الربط وهذا طبيعي لأن مجالها الحفظ والمشاركة، ولكن حتى الاستضافات المدفوعة العالمية قد لا تدعم هذه الخاصية مثل : ixwebhosting و استضافة أمازون . . . فعليك أن تتأكد من الاستضافة قبل استخدامها! لحسن الحظ وجدت استضافة مجانية تدعم هذه الخاصية بشكل مرضي بل ممتاز:

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

انتبه:

• هذا الموقع لا يسمح باستخدام أي سكريبت مدفوع مثل VB أو غيره حتى لو ملكت ترخيص استخدام وسوف يحذف حسابك جراء هذه المخالفة حسب نظامهم! ، يمكنك تركيب سكريت مجاني مثل برنامج مدونة ووردبريس
•  أنصحك بعدم ترك حسابك فارغاً ولو تكتب صفحات مترابطة HTML بمحتوى مقبول يوحي بأنك جاد ولا تريد استخدام الاستضافة المجانية كخدمة مشاركة ملفات!.

وكحل بديل: استخدام مكتبة خطوط موقع Fonts.com

  

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

طريقة استخدام الموقع باختصار فتح مشروع لخطوط الويب ثم إضافة الخطوط التي ترغب في استخدامها ( اختر المجاني منها فقط ) ، سيوفر لك الموقع رابط جافا تكتبه في قالب مدونتك ، ويمكنك استدعاء الخط بالطريقة المعتادة من خلال خصائص الأنماط CSS.

الخطة المجانية ستعرض مربع دعائي صغير للموقع في أحد أركان مدونتك، حسناً إذا كنت تستخدم قالب مصمم بطريقة خاصة يشوهها هذا المربع الدعائي يمكنك اخفاءه باستخدام Display:none خلال خصائص الأنماط CSS ، ثم حفظ حقوق الموقع بوضع رابطه في الصفحات الداخلية أو في أي مكان مناسب!.

تحديث: الحل بواسطة تشفير ملفات الخطوط base64

كنت قد جربت سابقاً أثناء تجاربي هذه الطريقة ولم تنجح مع الخطوط العربية ، وهذه النتيجة التي توصلت كنت فيها واهم، واثبت نجاحها الأخ عماد في هذا الدرس ( طريقة إضافة خطوط ويب عربية خاصة إلى مدونات بلوجر ) ، الطريقة مناسبة جداً ولا يعيبها إلا الكود الضخم الذي ينتج من عملية التشفير وسيتضاعف بعدد الخطوط فلا تضيف خط لخصائص css إلا غذا كنت تستخدمه فعلياً في المدونة. 

.

.

بالتوفيق إن شاء الله :)

.