CSS url() format() - what does it do?

Question

I am having trouble finding any documentation about the following CSS syntax, mainly because any page about 'css url format' is talking about the way URL's are structured, and not this particular syntax:

@font-face{
font-family:awesomefont;
src: url(fonts/awesome.woff) format("woff"),
url(fonts/awesome.ttf) format("truetype")
}

What does the format() part do here? I guess it tells the browsers what type of file they should expect. However, I have not seen it anywhere else except in @font-face declarations, but does it get used outside of that as well?

And how does the 'format' relate to the MIME type of the requested file?

BoltClock · Accepted Answer · 2013-09-19 10:07:12Z

3

This is covered in the CSS3 Fonts module:

External references consist of a URL, followed by an optional hint describing the format of the font resource referenced by that URL. The format hint contains a comma-separated list of format strings that denote well-known font formats. Conformant user agents must skip downloading a font resource if the format hints indicate only unsupported or unknown font formats. If no format hints are supplied, the user agent should download the font resource.

The specification makes no mention of MIME types, however.

The format() syntax only appears in the @font-face rule.

answered Sep 19, 2013 at 10:07

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kpull1 · Accepted Answer · 2013-09-19 10:08:01Z

1

Because there are no defined MIME types for TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type of the file specified is not considered.

Learn more about it: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

answered Sep 19, 2013 at 10:08

kpull1

1,66315 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS url() format() - what does it do?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related