New To HTML & CSS | How Can I Add A Custom Font From My Laptop?

Question

I'm new to CSS and i'm not sure how to add a custom font. I've tried searching everywhere on Stackflow and cannot find an answer.

@font-face{
    font-family: "Athelas";
    src: url('Athelas.ttf') format("truetype");
    font-style: normal;
    font-weight: normal;
}

body{
    background: rgb(2,0,36);
    background: linear-gradient(137deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background-attachment: fixed;
}

.center{
    text-align: center;
    font-size: 90px;
    font-family: "Athelas";
}

Note: I'm Used To Developing In LUA Via Roblox And I'm New To Stackflow

Have you checked this [question](https://stackoverflow.com/questions/5985097/custom-font-via-css)? — josepdecid, Jul 23 '20 at 09:58
I just found out, it has been working the whole time. The font was very similiar to the normal font. Sorry. — Zex, Jul 23 '20 at 10:06

score 2 · Answer 1 · answered Jul 23 '20 at 10:04

2

You can specify the src to be local, for example: src : local("Ubuntu Light")

From MDN docs:

If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used.

answered Jul 23 '20 at 10:04

Steven Kuipers

809
7
19

New To HTML & CSS | How Can I Add A Custom Font From My Laptop?

1 Answers1