Including a font in Angular.js (.ttf)

Question

I have a .ttf font file that I need to use in my Angular.js application. I don't know how to import it and access it in my css files.

Could someone give me some direction in using this font file with Angular/CSS?

Answer 1

Including a font has nothing to do with angularjs. You have to declare it in a CSS file:

Take this chunk of my own as an example, declared in a stylesheet:

@font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.eot'); /* IE9 Compat Modes */
src: url('../fonts/DurantBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/DurantBold.otf') format('opentype'), /* Legacy iOS */
     url('../fonts/DurantBold.svg#Durant-Bold') format('svg'), /* Legacy iOS */
     url('../fonts/DurantBold.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('../fonts/DurantBold.woff') format('woff');
font-weight: bold;
}

Remember that the paths are relative to the css file.

Today, most of the file formats are supported by most browsers - I don't know, concretely, the incompatibilities among browsers and fonts. This style is somewhat old.

Besides, I have all of those files (1 file per font, per format, per weight variation, per style variation - highly frustrating). You will not include configs for files you don't have.

If you have only .ttf files you only need this snippet in the .css file:

@font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.ttf')  format('truetype');
font-weight: bold;
}

remember to actually include the css file where you declared this chunk, in the page where you will use it. If you use states (ngRouter / ui.router), then include the font in the MAIN page, not in the partials.

remember to have the font files (.ttf) in a location accessible by the declaration in this css file either being:

• Absolute URL / CDN: this needs no explanation.
• relative-to-site url: a path starting with / refers the path being relative to document root, as always.
• relative url: a path not starting with / is relative to the current css file.

I know I wrote that many times but it always causes headaches when forgotten.