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

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

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

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

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

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

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

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

1 2 3 4 5

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

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

1 2 3 4 5

<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 ، ثم حفظ حقوق الموقع بوضع رابطه في الصفحات الداخلية أو في أي مكان مناسب!.

.

.

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