CODEWITHSUNDEEP
htmlcssgoogle-font-api
Orahmax
Orahmax

Reputation: 2341

How to resolve 'Allow control access origin' error while using Google fonts stylesheet?

I want to use Open sans font from google fonts, so i included the stylesheet link in my html file but it shows me 'Allow control access origin' error on localhost.

enter image description here

Code

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>HTML5 responsive website</title>

        <link rel="stylesheet" href="styles/reset.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet prefetch' type='text/css'/>

        <script src="js/modernizer.js"></script>
        <script src="js/respond.min.js"></script>

        <!-- external jquery file with fallback to local file if external one fails to load -->
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>

        <script src="lightbox/js/lightbox-2.6.min.js"></script>
        <script src="js/prefixfree.min.js"></script>
        <script src="js/jquery.slides.min.js"></script>
    </head>

Upvotes: 1

Views: 510

Answers (1)

Akaryatrh
Akaryatrh

Reputation: 531

The property prefetch probably calls an XHR request automatically made by browser. Then, it involves a cross-domain problem when you request your font on google domain.

But, as stated in this article http://daker.me/2013/05/5-html5-features-you-need-to-know.html, you can prefetch domain fonts.googleapis.com with dns-prefetch to faster your request.

Notice that prefetch & dns-prefetch properties are not cross-browser.

Upvotes: 1

Related Questions