Search code examples
htmlcssfontsfont-facewebfonts

@font-face rule not working in codepen

I am recreating on a email sign up page for my coding course. Here is the example of what I am suppose to recreate: Email Sign Up Page model

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 Mozilla Developer Docs @font-face page 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. My teacher's link 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.

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

@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;
}

Here is my email sign up code so far which shows what it looks like. Am I using the wrong src url for my code? Any tips?

Solution

  • Issue #1: You shouldn't have any spaces in your URLs.

    src: url('fonts/wisdom_script-webfont.eot');

    Issue #2: Much like an img src, your web font URL must point to a real resource hosted online somewhere. Right now, it's pointed to a fonts folder, which I'm guessing doesn't exist on the CodePen domain. If you have a CodePen Pro account, you can upload the font files via the Assets area (https://blog.codepen.io/documentation/pro-features/asset-hosting/); otherwise, you'll need to put the font files online somewhere else and point to that URL.

    Issue #3: Your font-family should reference the name of the font without the folder/URL, eg:

     font-family: 'WisdomScriptAIRegular';

    This is the same name you should use later in your CSS to use the font, too, eg:

    .recent_posts{
   font-family: 'WisdomScriptAIRegular', Arial, sans-serif;
}