کانفیگ وب سرور برای بارگزاری فونت ها

احتمالا براتون پیش اومده که تصمیم گرفتید فونت وب سایت رو تغییر بدید و با اینکه تعریف کردید فونت از چه آدرسی بارگزاری شود ولی فونت تعریف شده بارگزاری نشده و در کنسول (inspect) گوگل کروم با چنین پیغامی مواجه شده باشید :

کد:

Font from origin 'http://cdn.mydomain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mydomain.com' is therefore not allowed access.

خوب برای رفع این مشکل مطابق این آموزش عمل کنید.

اگر از وب سرور apache استفاده میکنید، اطمینان حاصل کنید mime-types برای فونت ها در فایل کانفیگ تعریف شده :
 

کد:

AddType application/font-sfnt            otf ttf
AddType application/font-woff            woff
AddType application/font-woff2           woff2
AddType application/vnd.ms-fontobject    eot

پس از اطمینان حاصل کردن از این موضوع فایل .htaccess  را با ویرایشگر باز کرده و کد های زیر را جهت بارگزاری فونت به این فایل اضافه کنید :
 

کد:

<FilesMatch ".(eot|ttf|otf|woff|woff2)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

اضافه کردن این کد به فایل .htaccess باید مشکل شما رو حل کرده باشه.

چنانچه شما از وب سرور Nginx استفاده میکنید، فایل های فونت از پیش و به صورت پیش فرض در این وب سرور همانند apache تعریف شده جهت اطمینان فایل کانفیگ Nginx رو باز کنید و این مورد رو چک کنید.

کد های مورد نظر جهت تعریف فایل های فونت (mime.types) در وب سرور Nginx :
 

کد:

application/font-sfnt            otf ttf;
application/font-woff            woff;
application/font-woff2           woff2;
application/vnd.ms-fontobject    eot;

خوب، چنانچه از این مورد هم اطمینان حاصل کردید، فایل کانفیگ vhost مورد نظر رو با ویرایشگر باز کنید و کد زیر رو در قسمت سرور اضافه کنید و البته فراموش نکنید که وب سرور Nginx رو ریستارت کنید.
 

کد:

location ~* .(eot|otf|ttf|woff|woff2)$
    add_header Access-Control-Allow-Origin *;

امیدوارم این آموزش مشکلتون رو حل کرده باشه و کارتون راه افتاده باشه، سوالی در این زمینه داشتید و یا به مشکلی برخوردید در اهمین پست مطرح کنید.

منبع: انجمن thewebhosting

لینک منبع