0

I have made an Enjin website, with it comes the option to create your own module by using HTML, CSS and JavaScript.

I created a navigation bar:

.navbar {
    position: fixed !important;
    background: #FCFCFF;
    top: 0;
    left: 0;
    z-index: 9999;
    height: 80px;
    width: 100%;
    font-family: 'sao_uiregular';
    font-size: 32px;
    transition: 300ms height ease-in-out, 300ms background ease-in-out;
    box-shadow: 0 0rem 1rem 0.5rem rgba(0, 0, 0, 0.25);
}

@font-face {
    font-family: 'sao_uiregular';
    src: url(http://files.enjin.com/1254562/custom_fonts/saofont-webfont.eot);
    src: url(http://files.enjin.com/1254562/custom_fonts/saofont-webfont.eot?#iefix) format('embedded-opentype'),
         url(http://files.enjin.com/1254562/custom_fonts/saofont-webfont.woff2) format('woff2'),
         url(http://files.enjin.com/1254562/custom_fonts/saofont-webfont.woff) format('woff'),
         url(http://files.enjin.com/1254562/custom_fonts/saofont-webfont.ttf) format('truetype'),
         url(http://files.enjin.com/1254562/custom_fonts/saofont-webfont.svg#sao_uiregular) format('svg');
    font-weight: normal;
    font-style: normal;

}
<body>
    <div class="navbar">
        <ul class="items">
            <li id="home"><a class="anm" href="page1">Home</a></li>
            <li id="forums"><a class="anm" href="page2">Forums</a></li>
            <li id="store"><a class="anm" href="page3">Store</a></li>
            <li id="stafflist"><a class="anm" href="page4">Staff List</a></li>
            <li id="support"><a class="anm" href="page5">Support</a></li>
        </ul>
    </div>
</body>

the font does not seem to work, I stored it in the Enjin's website files. In the CSS I tried putting "", '', and nothing in the url, but none of them seemed to work. My question is why won't it work?

RonFarkash
  • 41
  • 9
  • 1
    Have you looked in the browser console? Because if you did, it would tell you exactly what is wrong - a CORS issue. – patricksweeney Jul 07 '16 at 20:21
  • @patricksweeney In the console it does not state any issue. – RonFarkash Jul 07 '16 at 20:28
  • Actually, it does: `Font from origin 'http://files.enjin.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 'null' is therefore not allowed access.` – imtheman Jul 07 '16 at 20:31
  • 1
    You're not looking in the right place then - even shows up if you run your code snippet above. – patricksweeney Jul 07 '16 at 20:32
  • Possible duplicate of [Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy](http://stackoverflow.com/questions/25577981/font-from-origin-has-been-blocked-from-loading-by-cross-origin-resource-sharing) – imtheman Jul 07 '16 at 20:33
  • @imtheman as I am looking at the possible duplicate the answers are just leading to more questions that were asked. Is this problem solveable, and if it is, is there any tutorial on how? – RonFarkash Jul 07 '16 at 20:47

0 Answers0