Search code examples
cssfont-facewebfonts

Using @font-face src: local with fonts.com web fonts

As discussed here, the affordable fonts.com web fonts plans don't allow fonts to be directly embedded via @font-family, or so it would seem...

I'm wondering if this would work:

@font-face {
    font-family: 'Main';
    src: local('FoobarBk'), local('FoobarBk Regular');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Main';
    src: local('FoobarMd'), local('FoobarMd Regular');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Main';
    src: local('FoobarIt'), local('FoobarIt Regular');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Main';
    src: local('FoobarMdIt'), local('FoobarMdIt Regular');
    font-weight: normal;
    font-style: normal;
}

The idea is that once the fonts.com supplied script has finished loading the FoobarBk, FoobarMd, FoobarIt and FoobarMdIt fonts, they would be available as local fonts (without an additional page load) and any CSS styles specifying Main as the font-family would instantly make use of them.

I suspect this is just wishful thinking, but I'd prefer someone to chime in with an answer one way or the other.

Solution

  • From my experience the the term "local" here means that the user has the font installed into their OS, and not that it's simply a locally cache file in your browser.

    For a new user to your site you want to be able to guarantee that they get your font so typically the "local" font is pointed at a non-existent reference so they have to down load from your web server. This is to protect against the user having a naff font with the same name as yours and the design looks awful.

    See the smiley-face answer also on SO

    If you are in a controlled environment where you know you can trust the client's installed fonts (i.e. they have all the Foobar variations installed) then your approach would work.