Importing fonts?

1

Hello campers,

I’m trying to import some custom fonts for my JS calculator. I’m having trouble with doing this in codepen, I’m not sure where to host the font-file to be able to supply a direct link to the page? I’ve been getting this error in my console:

“Font from origin ‘https://www.dropbox.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 ‘http://s.codepen.io’ is therefore not allowed access”

I was trying to host the file in drop box and it’s not working. Here’s a link to my codepen: http://codepen.io/nwright/pen/rrrPvZ

If anyone has experience hosting web fonts somewhere please help! Thank you guys!

3

I’ve looked around and I can’t find it on google fonts, found something kinda similar but not the same. I suppose I’ll settle for it for now.

5

Can you please help - how can I add the google font in CSS settings of CodePen? I am trying to include the Lobster font using - https://fonts.googleapis.com/css?family=Lobster but that doesnt seem to be of any help. I event tried adding import statement in CSS but still no luck. Am I missing something?

6

When you choose a font on Google Fonts they give you a link like :

<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">

and this:

font-family: 'Arima Madurai', cursive;

You put the link in your HTML (between the <head> tags, and the second snippet you put it in your css, for ex:

body:{
font-family: 'Arima Madurai', cursive;
}
7

Here is a video that shows how to use Google Fonts.

8

@arpymastro I think you need to use @import url(url to Google font); to get Google fonts to work in Codepen.

Check this pen out.

Codepen Google fonts http://codepen.io/palimadra/pen/jLtqe

9

I was having problems with this too. I think my bootstrap was overriding my font choices, so I had to give them classs or IDs. I then selected them in my CSS page and specified the fonts there.

10

Would hosting it on GitHub work? Worth a shot, then you would know if it’s Dropbox related or not …

11

I don’t know if anyone is still following this, but I have the same problem: linking to ttf files in dropbox, back when the Public folder was still public, everything worked fine. Now I’m hosting the same font file on cloudinary, and my css just ignores the call to it, to its url… I have no idea why that is, why it worked with Dropbox in the first place: if it is just a matter of referring the right url, which I did for all my images and videos (now moved to cloudinary too), why does it not work for fonts?
Google fonts will probably do, it’s just a course after all, but I can’t figure it out, nor do I find any useful posts about it.