CSS3 font-face old browsers compatibility + local fonts

Question

I've looked up on the internet and on Stack Overflow as well, but even if many have covered this topic I'm not sure how to effectively do it.

My intention is to use CSS3 font-face with the maximum compatibility range as possible, checking if the webfont used is already installed on the device. Then, if it is, make the browser use that instead of downloading it.

This is my attempt, that of course is not working as expected. For instance Firefox downloads the woff2 version of my webfont.

@font-face{
    font-family: mplus-1c;
    src: local('M+ 1c regular'),
        local ('mplus-1c-regular');
    src: url('../fonts/mplus-1c-regular-webfont.eot');
    src: url('../fonts/mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/mplus-1c-regular-webfont.woff2') format('woff2'),
        url('../fonts/mplus-1c-regular-webfont.woff') format('woff'),
        url('../fonts/mplus-1c-regular-webfont.ttf') format('truetype'),
        url('../fonts/mplus-1c-regular-webfont.svg#m_1cregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

Mr Lister is absolutely right! Moreover I found a very stupid syntax error that prevented his suggestion from working:

local ('mplus-1c-regular');

should have been

local('mplus-1c-regular');

Silly me.

Thank you again, Mr Lister! To sum' this up, here's the correct code:

@font-face{
    font-family: mplus-1c;
    src: url('../fonts/mplus-1c-regular-webfont.eot');
    src: url('../fonts/mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'),
        local('M+ 1c regular'),
        local('mplus-1c-regular'),
        url('../fonts/mplus-1c-regular-webfont.woff2') format('woff2'),
        url('../fonts/mplus-1c-regular-webfont.woff') format('woff'),
        url('../fonts/mplus-1c-regular-webfont.ttf') format('truetype'),
        url('../fonts/mplus-1c-regular-webfont.svg#m_1cregular') format('svg');
    font-weight: normal;
    font-style: normal;
}