css @font-family in what cases should I specify format?

Question

I'm new in IT and I'm learning CSS now.

And sorry for probably a stupid question, which might have been asked already many times - but I've been trying to find the answer for about two or three hours myself, but it didn't work out. So I decided to ask the question here.

I'm trying to understand how to define custom fonts in css file. And that's what I have:

@font-face {
    font-family: "Christmasscript";
    src: url("fonts/christmasscriptc.ttf") format("truetype");
}

h1 {
    font-family: "Christmasscript", sans-serif;
}

And it works perfectly.

But if I don't specify the format:

@font-face {
    font-family: "Christmasscript";
    src: url("fonts/christmasscriptc.ttf");
}

it also works.

So my question is - when should I specify the format? This case shows that "format" property is not always required to make things work. But if this proeprty exists, it must be needed in some cases, right? Could you help me please?

Answer 1

It also worked even when you didn't specify it because the web uses WOFFor WOFF 2.0 which basically were built on truetype and it's the most common font format for both the Mac OS and Microsoft Windows operating systems.

So there are mainly three types of fonts formats:

1-Desktop format: which can be used in everything that requires locally installable fonts.

2-Web format: which can be used in all types of websites.

3-Proprietary formats: Only included in the apps they were designed for.

So keep in mind that not all fonts formats will work on the web.

Here is Browser Support for Font Formats

there are 6 types of available types for format according to MDN web docs which are (woff, woff2, truetype, opentype, embedded-opentype, and svg)

Let's say you downloaded a font of type woff and you specify the format to be for example svg, it won't work.