الاثنين، 6 أغسطس، 2012

حل مشكلة فونت فيس وفاير فوكس!

يا لهوي D:
شعور استثنائي لما تكون بتواجه مشكلة من سنتين خلتك تشد في شعرك وبالصدفة -بعد سنتين- تعرف إيه سبب المشكلة D:

مكنتش فاهم ليه فاير فوكس الوحيد اللي مش بيعرض خطوط الويب على الموقع بتاع عن طريق خاصية @font-face في css
كل حاجة تشتغل تمام ويجي مع فاير فوكس يقف! ليه؟ مش عارف! فين المشكلة؟ مش عارف؟ إيه الحل؟ أكيد مش عارف برده xD

افتراضياً الباشا طلع بيعمل بلوك لخطوط الويب اللي مش على نفس الدومين (أوحتى السب دومين)! ولإني كنت بتستعمل بلوجر فمكانش ينفع أرفع ملفات تكون على نفس الدومين.
يعني لو الموقع بتاعك كدا

#www.yourdomain.com

لازم الخطوط تكون تحت الدومين .... يعني كدا مثلاً

www.yourdomain.com/fonts/font.ttf


لكن لو استعملت أي دومين تاني (او حتى سب دومين على نفس الدومين الرئيسي) الخطوط مش هتظهر ... كدا يعني:

files.yourdomain.com/fonts/font.ttf
www.anotherdomain.com/fonts/font.ttf


الحل إنك يا إما تخلي الخطوط على نفس الدومين، أو إنك تعدل في الكونفجريشن بتاع الويب سيرفر بحيث تفهمه إنه مفيش مشاكل إن حد يستعمل أي ملفات بامتداد معين زي الخطوط مثلاً على دومين تاني.
ضيف في ملف .htaccess

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

برده في حل تاني مقترح تستعمل وانت بتعمل الخطوط base64 encoding

font-face fonts only work on their own domain - stackoverflow
Cross domain workaround for @font-face and Firefox

D:

هناك 6 تعليقات:

  1. مش فاهم!
    وصفت المشلكة على أنها من طرف فيرفُكس، ثم وصفت حلّ في خادوم الوِب!

    كذلك وضّح لي: إن كنت تستخدم بلوجر، فكيف لك الوصول إلى .htaccess؟

    ردحذف
  2. بص يا سيدي،

    فاير فوكس معد افتراضياً على إنه ميشغلش خطوط الويب إذا كانت على دومينات مختلفة زي ما وضحت سابقاً (أو حتى سب دومين مختلف) .... إلا إذا كانت القيمة Header set Access-Control-Allow-Origin بتاعت http header اللي بيبعتها خادم الويب بتوضح وتسمح بده بشكل صريح.

    وفي نفس الوقت أغلب خوادم الويب مش بيكون معد فيها قيمة Header set Access-Control-Allow-Origin.


    يبقى الحل دلوقتي حاجة من اتنين يا إما لوكال (عن طريق تغيير إعدادات فاير فوكس) وده طبعاً هيكون على مستوى جهاز واحد، يا إما حل عام على خادم الويب (اللي عليه ملفات الخطوط نفسها) عن طريق تحديد قيمة Header set Access-Control-Allow-Origin.

    وده طبعاً بخلاف الحل الأساسي اللي هو نخلي ملفات الخطوط على نفس الدومين وده مش متاح في بلوجر.



    بالنسبة لملف .htaccess
    المقصود مش بتاع بلوجر، إنما بتاع الخادم اللي عليه ملفات خطوط الويب (ttf|ttc|otf|eot|woff).


    بس كدا :-)

    وعلى فكرة مش أول واحد يسألني D:
    تقريباً عشان كنت بكتب بسرعة فالكلام مش واضح أوي :-)

    ردحذف
  3. شكرا انك كتبت عن الملاحظة دى لانى كنت لسه ها اعملها, كنت ها اعمل سب دومين و اعتمد على الخطوط الى موجودة فى الدومين الاساسى :D

    ردحذف
  4. تسلم يا بوب
    اشتغلت معايا عن طريق اختيار base_64 encode

    ردحذف
  5. طبعا ما فاااااااهم ولا حاجه.....

    ردحذف