@font-face rule not working in codepen
<p>I am recreating on a email sign up page for my coding course. Here is the example of what I am suppose to recreate:
<a href="https://i.stack.imgur.com/OudZG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OudZG.jpg" alt="Email Sign Up Page model"></a></p>

<p>In order to make this project look at closely as possible to the example, I have been trying to use the @font-face rule with the Wisdom font to get the headlines with  tags to have the wisdom font. My course suggests using Mozilla Developer Docs to get Wisdom Font to work. I have been using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" rel="nofollow noreferrer">Mozilla Developer Docs @font-face page</a> to help me and my coding course provided the Wisdom font in zip files. I downloaded the file and extracted all the contents. Once I downloaded the file, I followed the syntax in Mozilla Docs. However the font changed from Comic Sans to Arial. I downloaded the Wisdom font file again and played around with the syntax and changing the src url to see if that would help. However the font still remains on Arial. I emailed my teacher about the issue and she sent me another link. <a href="http://theme.fm/2011/07/how-to-use-web-fonts-and-the-font-face-css-method-1081/" rel="nofollow noreferrer">My teacher's link</a> has the @font-face kit generator and I used that to get the file formats on my computer. After I used the kit, I followed the example syntax for both basic and cross compatibility. However the font still remains the same.</p>

<p>Right now my code for the @font-face on my site looks like this:</p>

<pre><code>@font-face {
font-family: 'fonts/WisdomScriptAIRegular';
src: url('fonts/ wisdom_script-webfont.eot');
src: url('fonts/ wisdom_script-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/ wisdom_script-webfont.woff') format('woff'),
url('fonts/ wisdom_script-webfont.ttf') format('truetype'),
url('fonts/ wisdom_script-webfont.svg#WisdomScriptAIRegular') format('svg');
font-weight: normal;
font-style: normal;
}
</code></pre>

<p>Here is my <a href="http://codepen.io/BritishPandaChick/pen/ZWGvyj" rel="nofollow noreferrer">email sign up code so far</a> which shows what it looks like. Am I using the wrong src url for my code? Any tips?</p>