1

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?

Irina Bogatyreva
  • 13
  • 3

1 Answers1

0

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.

Dhaifallah
  • 1,437
  • 1
  • 5
  • 19
  • > Let's say you downloaded a font of type woff and you specify the format to be for example svg. Why would I ever specify `svg` format for `woff` type? It doesn't make sense, does it? My quesion was: in what cases a font will not be displayed correctly without specifying `format` explicitly. From your answer I can assume that all fonts supported by web browsers are displayed correctly without specifying `format`. But if I'll try to define a font which is not supported by a browser - it won't work and specifying `format` won't help, right? So specifying format seems redundant. – Irina Bogatyreva Mar 23 '22 at 14:04
  • @IrinaBogatyreva maybe my explanation wasn't clear enough, but long story short the `format` is just an efficiency measure to make the code more reliable. – Dhaifallah Mar 23 '22 at 14:31