If I'm defining a custom external font in css, do I need to declare the src for every class that uses it?

Question

If I am using an externally loaded font (e.g. "MyFont") and it's going to be used in multiple classes, do I need to do this:

.one { font-family: MyFont; src: url( "fonts/MyFont.ttf" ); }
.two { font-family: MyFont; src: url( "fonts/MyFont.ttf" ); }

or can I do this?

.one { font-family: MyFont; src: url( "fonts/MyFont.ttf" ); }
.two { font-family: MyFont; }

Answer 1

No, check out this article: The New Bulletproof @Font-Face Syntax

Add something like this at the beginning of your CSS file:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Running with this sample code, the rest of your CSS should look something like:

.one { font-family: MyFontFamily }
.two { font-family: MyFontFamily }

Answer 2

You should use @font-face directive.

@font-face {
    font-family: MyFont;
    src: url(...);
}

.one { font-family: MyFont; }
.two { font-family: MyFont; }