Unable to load fonts using #font-face - html

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.

Answer 2

The website that you are trying to load the font(s) from is blocking the loading of the fonts onto your page as web fonts are subject to Cross-Origin Resource Sharing (CORS). CORS is basically a way for a remote host to control access to certain types of resources, so without the owner of the server that you are trying to access the fonts from modifying their .htaccess file to include the header to allow the CORS, you are unable to utilize these fonts from that server.
More info on CORS can be found here if you want to learn some more.
The simplest thing to do would be to download the fonts you have specified by placing the URL you used in the #font-face property in your browser and then putting them in the folder where your site's folder, and modifying the #font-face URL's to direct to your local folder.
For example if you were to download the fonts to your site's folder in a subfolder called /fonts, you would modify the #font-face src to the following:
#font-face {
font-family: 'MyriadPro Regular';
src: url('fonts/MyriadPro-Regular.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('fonts/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
url('fonts/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
Apart from avoiding your issue, the other thing is that by storing the files locally, it greatly reduces the loading time for the user as it is not relying on the external server to provide the files.
Hope this clears everything up.