Question on Importing Fonts

HTML-CSS
1

Basically, I am making a Tribute page for Nikola Tesla (the very first project) and I would like to use his handwriting as my font and I don’t exactly know how to do that. I cannot find the font on a free site, but I have it downloaded on my computer.

2

Hey check this stackoverflow out and see if you get it.

If you are making a github repos and uploading the font file on there, make sure you use relative file path, so the webpage still knows where to look.

1 Like
3

When you like to use custom fonts, you need to add this code inside your CSS file for each font style:

@font-face {
  font-family: 'NDGambit';
  font-style: bold;
  font-weight: 700;
  src: url(../fonts/NDGambit/NDGambitExtraBold.woff2) format('woff2'),
    url(../fonts/NDGambit/NDGambitExtraBold.woff) format('woff');
}

Try to use the font formats WOFF and WOFF2 to not slow down your website. If you just have OTF or TTF format then you need to change the format to ‘otf’ or ‘ttf’

1 Like
4

So, in the url part, I just basically link it to the path of the directory on my computer?

5

I get most of what’s going on there, I just can’t find the font I want on a site to link to.

6

In the URL path you need to link to the fonts folder inside your application

7

Ok, I am using codepen.io so I am not exactly sure where the fonts should go for my project.

8

Add it to the CSS panel, there is one in CodePen

9

You can use CodeSandbox instead if you need to host assets.

Or, as I doubt most actually know what Tesla’s handwriting looks like just use some Google handwriting font that you like.

10

Right, but @kazoo said I need to link to the fonts folder. The fonts folder on my PC? I don’t have an ftp site, which looks like the alternative? If the page was already part of a website, the instructions say to just dump the font on your ftp site, link it, and your good. Do I need to set up an ftp site? I will if I have to. I know I don’t need the actual font to finish the project, but in the future I amy have to do this and it would be nice to figure this out.

11

I thought you need this font for your application, then you can use the link to your fonts folder (inside your application). When you like to use codepen instead, I guess you need to save the font somewhere on a server and then link to the url where the font is hosted. Maybe there is also another way to host custom fonts on codepen, but this I dont know.

Edit: In order to give your application access to the font, the font file need to be saved somewhere. When you host your whole application you can save the font file inside your application, but when you just want to use a service like codepen you need to save it somewhere on a server so that the link to the font is accesible.

Hope that helps :slight_smile:

2 Likes
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.