Merge font-faces with similar font-* rules

[a-x-]

Merge

        @font-face {
            font-family: 'Yandex Sans Text Web';
            font-weight: 300;
            font-style: normal;
            font-stretch: normal;

            src: url(Yandex-Sans-Text-Web-Bold.woff) format('woff');
        }

        @font-face {
            font-family: 'Yandex Sans Text Web';
            font-weight: 300;
            font-style: normal;
            font-stretch: normal;

            src: url(Yandex-Sans-Text-Web-Bold.woff2) format('woff2');
        }

into (reverse urls!):

        @font-face {
            font-family: 'Yandex Sans Text Web';
            font-weight: 300;
            font-style: normal;
            font-stretch: normal;

            src: url(Yandex-Sans-Text-Web-Bold.woff2) format('woff2'), url(Yandex-Sans-Text-Web-Bold.woff) format('woff');
        }

algorithm suggestion:

0. normalize font-* rules predicate (remove defaults, reorder, remove redundant spaces...)
1. make hash by font-* rules predicate, create clusters
2. match&join urls within clusters

[qfox]

Hm...

I'd say into:

        @font-face {
            font-family: 'Yandex Sans Text Web';
            font-weight: 300;
            src: url(Yandex-Sans-Text-Web-Bold.woff2) format('woff2');
        }

What you suggest is not the same for browsers.

Upd:

        @font-face {
            font-family: 'Yandex Sans Text Web';
            font-weight: 300;
            /* note that lonely src-url without format should not be merged with the rest for IE */
            src: url(Yandex-Sans-Text-Web-Bold.eot);
            src: url(Yandex-Sans-Text-Web-Bold.woff2) format('woff2');
        }

[a-x-]

I not agree with you @zxqfox, woff is more widely compatible

and it's another slightly diferent task

[qfox]

@a-x- CSSO should not modify your css, it should optimize it.

[lahmatiy]

woff is more widely compatible

It doesn't matter since any transformation should to produce the same meaning CSS, even when original CSS is incorrect or ineffective. Transformation may to be implemented. But how the case is common?

[a-x-]

yep

e.g. We'll be happy in Yandex with our cases (we have levels: common, desktop, touch-phone, etc.).

[lahmatiy]

Question is about how the case is common. It can help prioritise of efforts. I guess it's not so common. But you can propose a PR.

[dryabov]

We use csso to optimize critical css on several websites, and found there are many Wordpress plugins that load its own copy of FontAwesome, and this kind of optimization would be very effective in reducing critical css size.

PS. I was sure the second @font-face declaration with the same font family, weight, unicode range, etc. should override the first one even if src format is different. Isn't it?

[peterbe]

@dryabov Not to be picky but this issue is about merging different font-face blocks. https://github.com/css/csso/issues/351 is about eliminating identically repeated font-face blocks.