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

Answer 1

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.