Cross Domain-teckensnitt CORS
CSS-typsnitt laddas inte

Typsnitt som Inte Laddas in i Dokument

De flesta webbläsare tillåter inte förfrågningar över domäner, det beror på samma säkerhetspolicy för ursprung. Detta innebär att ibland kan du göra fel när du använder webb-teckensnitt från en annan domän och teckensnittet inte laddas i webbläsaren eller i HireHop-dokument.

<style type="text/css">
@font-face {
    font-family: 'OpenSans';
    src: url('https://my_server.com/fonts/OpenSans.woff2') format('woff2');
}
html, body{
    font: normal 16px OpenSans, sans-serif;
}
</style>

Lösningen

För att fixa begränsningar för ursprungsgränser för dina teckensnitt måste svaret från fjärrservern som är värd för teckensnittsfilerna innehålla huvudet Access-Control-Allow-Origin.

Om du använder teckensnittstjänster som Typekit eller Google Fonts, eller kanske innehållsleveransnätverk som BootstrapCDN, CdnJS eller JsDelivr för att ladda dina önskade teckensnitt behöver du inte göra någonting eftersom huvudet Access-Control-Allow-Origin är redan skickat in sitt svarhuvud.

Apache

Om du vill konfigurera en Apache-webbserver sätter du följande kod i filen httpd.conf eller .htaccess.

1. Lägg till rubriker av MIME-typ på Apache:

   AddType application/vnd.ms-fontobject    .eot
   AddType application/x-font-opentype      .otf
   AddType image/svg+xml                    .svg
   AddType application/x-font-ttf           .ttf
   AddType application/font-woff            .woff
   AddType application/font-woff2           .woff2
   

2. Aktivera resursdelning mellan ursprung (CORS) på Apache för mimtyperna:

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

NGINX

För att konfigurera en NGINX-webbserver, lägger du följande kod i /etc/nginx/nginx.conf eller din anpassade /etc/nginx/conf.d/custom.conf-fil.

1. Lägg till rubriker av typen MIME på NGINX:

   application/vnd.ms-fontobject    eot;
   application/x-font-opentype      otf;
   image/svg+xml                    svg;
   application/x-font-ttf           ttf;
   application/font-woff            woff;
   application/font-woff2           woff2;
   

2. Aktivera resursdelning mellan ursprung (CORS) på NGINX för MIME-typerna:

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

IIS

För att konfigurera Microsoft IIS lägger du till följande kod i web.config system.webServer-filen.

• Aktivera resursdelning mellan ursprung (CORS) på IIS

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="access-control-allow-origin" value="*" />
        <add name="access-control-allow-headers" value="content-type" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
  

PHP

Om du inte kan ändra serverinställningarna kan du alltid använda PHP för att leverera teckensnittfilen.

• Använd en serverskriptfil istället för en fysisk typsnittsfil

  <style type="text/css">
  @font-face {
      font-family: 'OpenSans';
      src: url('https://my_server.com/fonts/OpenSans.php') format('woff2');
  }
  html, body{
      font: normal 16px OpenSans, sans-serif;
  }
  </style>
  

• Hur du åtgärdar problem mellan domäner @font-face med PHP

  <?php
  // fonts.php
  header('Access-Control-Allow-Origin: *');
  header('Content-Type: application/font-woff2');
  echo @file_get_contents('/fonts/OpenSans.woff2');
  ?>