Harry Potter Font

#1

Good day all!

So I have spent the last 4 hours trying to get this Harry Potter font to work in codepen. Please let me know what I am doing wrong.

@font-face {
font-family: ‘Harry Potter’;
src: url(‘http://www.fontsaddict.com/fontface/harry-potter.TTF’);
}

The site states this above the code:
"Below is the font-face css code for Harry Potter font to add to your website’s css file.

You may use our server to host the font file for free, to enable this you MUST link back to fontsaddict.com from your website.
Websites without a link back will be blocked from our server. If the font file isnt loading on your website, your domain has been blocked, please contact us to unblock it."

Any info you could provide would be greatly appreciated.
Thanks!

#2

That’s most likely not the actual problem. Check your browser console for errors. Most likely, it’s because you’re trying to load insecure (HTTP) content from a secure (HTTPS) page. You can use a CORS (cross-origin resource sharing) proxy, such as https://crossorigin.me, to allow it to load. I guess they could block that proxy from retrieving the font, though, because the proxy won’t link back to their site.

1 Like
#3

I admire your dedication to Harry Potter-ising your page. :smiley:

#5

Thank you, I will give this a shot.

#6

Thank you! The dedication and perseverance continues, still no success! :sweat_smile:
I’m surprised Google doesn’t have a “Potter-esque” or “Wizard-ish” type font. :thinking:

#8

I just visited your attached link for Harry Potter fonts. Looks so good and decent.

#9

I think Google chose to host fonts that are more “normal”, i.e. mostly sans and sans-serif.

You can try hosting your font elsewhere that your page can access it. For example, I hosted this font on dropbox for my wikipedia viewer, and it still works today: https://dl.dropbox.com/s/15paxui8po65jnh/Confetti%20Stream.ttf?dl=0

However, codepen may be the problem that is blocking it. I would try using GitHub Pages, Surge, or Netlify.

1 Like
#10

Did you manage to get it working in the end? If not, could you post a link to your pen?

#11

Hi Lionel, thanks for your support.
I have since moved on with the project, but the attached link will show how I had things set up.
If you are able to figure out where I went wrong here, I would love to go back and update the font.

https://codepen.io/WesleyUdevelop/pen/LQweoy

#12