Custom Font on Holder.js objects

Question

This is how the output is supposed to be, and is, on Firefox:

https://www.dropbox.com/s/4uxz6l5po0bkhat/firefox.png?dl=0

However, Chrome and Opera do not use this custom font on Holder.js objects. This is how they render it:

https://www.dropbox.com/s/q2i0o6a61lq1hyx/opera-chrome.png?dl=0

Here is the head of my main HTML:

<link rel="stylesheet" type="text/css" href="css/zond.fonts.css" class="holderjs">
<script src="js/holder.min.js"></script>
<script src="js/holder.themes.old.js"></script>

Here is my holder.js object:

<object data-src="holder.js/150x150?theme=zond5&text=Guide to MUN" style="width:150px; height:auto"></object>

Here is my zond.fonts.css:

@font-face {
    font-family:'wf_segoe-ui_normal';
    src:url('segoe-ui-west-european-normal.eot');
    src:url('segoe-ui-west-european-normal.eot?#iefix') format('embedded-opentype'),
        url('segoe-ui-west-european-normal.woff') format('woff'),
        url('segoe-ui-west-european-normal.ttf') format('truetype'),
        url('segoe-ui-west-european-normal.svg#web') format('svg');
    font-weight:normal;
    font-style:normal
}

And here is my holder.themes.old.js:

Holder.addTheme("zond5", {
    foreground: "#333",
    background: "#f8ff62",
    size: 16,
    font: "wf_segoe-ui_normal",
    fontweight: "normal"
});

Where should the problem be? I'm guessing it has something to do with the CSS fonts? Should it be an issue when I have already included all possible font types?

Answer 1

You need to set the proper CORS headers, since the fonts are loaded locally. See https://gist.github.com/atiw003/1131897

Snippet for Apache:

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

Snippet for nginx:

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