Unable to load fonts using @font-face

Question

I am trying to add 'MyriadPro' font using the @font-face. Here's the fiddle

HTML code:

<h1> Test Heading </h1>

CSS Code:

@font-face {
font-family: 'MyriadPro Regular';
  src: url('http://consumemarketing.com/thai-works/MyriadPro-Regular.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('http://consumemarketing.com/thai-works/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
        url('http://consumemarketing.com/thai-works/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
h1{
  font-family: 'MyriadPro Regular', sans-serif;  
}

I've tried to test this locally, doesn't work, not sure what's missing.

Answer 1

You spelled MyriadPro as MyriaedPro

h1{
  font-family: 'MyriadPro Regular', sans-serif;  
}

Edited

This is the error being displayed in the console.

Font from origin 'http://consumemarketing.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.

and this is the error being displayed in your fiddle.

Mixed Content: The page at 'https://jsfiddle.net/krish7878/27tp756L/' was loaded over HTTPS, but requested an insecure font 'http://consumemarketing.com/thai-works/MyriadPro-Regular.woff'. This request has been blocked; the content must be served over HTTPS.

You are trying to load the fonts locally, which is not allowed as the requested resource doesn't have a header and in your JSFiddle, it doesn't allow the font to load as it is from an insecure origin (http). So instead download the fonts locally and try using them, which works surely.