Search code examples
cssfontsgoogle-fonts

Can you use fonts you've downloaded on your computer in a local project?

Disclaimer: I'm a noob so please don't use too many hard terms when answering lol

I have a couple of cute fonts I downloaded from dafont and am hoping to use in my coding project from school. I'm calling it a local project because it will not be uploaded online, we'll just be sending the markers a zip file of the work we've done. I was wondering if the markers will actually be able to view the fonts that I'm wanting to use?

Would I be safer using google fonts? But I tried downloading one and it wouldn't show up when I wrote it like:

p {
font-family: Nunito;
}

I am using Visual Studio Code and it didn't do the typical autocomplete, and saving it and running it didn't make it work.

Here's the entire code:

body {
    background-color: white;
}

h1 {
    color: #b98b82;
    font-family: Seritta, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

p {
    font-family:Arial, Helvetica, sans-serif
}
Solution

  • If you have downloaded your fonts, you can just add your font files to your project. I recommend adding them to a folder (maybe call it "fonts"). After you added them, just add a @font-face to your css.

    @font-face {
font-family: 'YourFont';
src:  url('fonts/yourfont.woff2') format('woff2');
}

    To use it now, you just have to specify the font-family, for example:

    body{
font-family: 'YourFont';
}