Including a font in Angular.js (.ttf) - css

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.