Clever Geek Handbook

Including font in Angular.js (.ttf)

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.

Can anyone give me some guidance on how to use this font file with Angular / CSS?

+3


source to share


1 answer


Font inclusion has nothing to do with angularjs. You must declare it in your CSS file:

Take this piece 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 the paths are relative to the css file.

Most file formats are supported by most browsers today - I don't know specifically about the incompatibilities between browsers and fonts. This style is somewhat old.

Besides, I have all these files (1 file per font, per format, per weight change, per style change - it is very frustrating). You won't include configuration for files you don't have.



If you only have .ttf files, you only need this chunk of 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 snippet in the page where you will be using it. If you are using states (ngRouter / ui.router), include the font on the MAIN page and not the partial ones.

remember to keep the font files (.ttf) in a declarable location in that css file, either:

  • Absolute URL / CDN: This is self-explanatory.
  • relative url: path starting with / indicates the path relative to the document root, as always.
  • relative url: path not starting with / refers to the current css file.

I know I've written this many times, but it always gives headaches when forgotten.

+12


source






More articles: