0

I'm working in a website shoestrap child theme, based in bootstrap. I used @font-face for change my webfonts, but it isn't working in all browsers. Works only in chrome.

What do I do?

My css code:

@font-face {
   font-family: 'open_sansitalic';
   src: url('assets/fonts/OpenSans-Italic-webfont.eot');
   src: url('assets/fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/OpenSans-Italic-webfont.woff') format('woff'),
        url('assets/fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
        url('assets/fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
   font-weight: normal;
   font-style: normal; }

h1 { font-family: 'open_sansitalic' sans-serif;  font-size: 40pt; line-height: 50pt; color: #f68934; }
user3216077
  • 209
  • 2
  • 5
  • 13

1 Answers1

0

I know other browsers such as firefox have very tight restrictions about where the location of the font is. It requires that the font be severed from the same domain as the calling website. Trying inserting the below code in your .htaccess file.

<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>
Kwekuq
  • 123
  • 1
  • 1
  • 10