Including a Font in Angular.Js (.Ttf)

Including a font in Angular.js (.ttf)

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.

How to import a new font into a project - Angular 5

You need to put the font files in assets folder (may be a fonts sub-folder within assets) and refer to it in the styles:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

Once done, you can apply this font any where like:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

You can put the @font-face definition in your global styles.css or styles.scss and you would be able to refer to the font anywhere - even in your component specific CSS/SCSS. styles.css or styles.scss is already defined in angular-cli.json. Or, if you want you can create a separate CSS/SCSS file and declare it in angular-cli.json along with the styles.css or styles.scss like:

"styles": [
  "styles.css",
  "fonts.css"
],

Adding new font to an Angular project

You are using material css which already have the font Roboto by default. So, eventually, your global font is overriden.

You'll need to override material's font by something like below.

h1 { font-family: 'p22-mackinac-pro', serif !important; }

How to import a new font into a project - Angular 6

Step #1

Create a scss file with font face and place it somewhere, like in assets/fonts

font_name.scss

@font-face
{
    font-family: Futura Bk Bt;
    src: url("./FuturaBookfont.woff") format("woff");
}

woff file converter link https://www.font-converter.net/en

Step #2

Paste the .woff file into the src url path.

Step #3

Include the scss file into your angular.json file

{
 ...
 "projects": {
 "project-name": {
  ...
   "architect": {
     "build": {
       ...
       "options": {
        ...
        "styles": [
          ...
          "src/assets/fonts/font_name.scss",
          ...
        ],
        ...
      },
      ...
    },
    ...,
    "test": {
      ...
      "options": {
        ...
        "styles": [
          ...
          "src/assets/fonts/font_name.scss",
          ...
        ],
        ...
      }
    },
    ...
   }
 },
}

It is Also Used For All Fonts Include Paid Fonts Also(Ex: Futura Bk Bt,..)

Best practice/Style for importing font into angular 4 cli web application

There is better way to include fonts to the website, not only to angular app.

Checkout https://fonts.google.com

Why it is better?

• higher performance
• higher chance, that your customer will have font in his cache
• you don't have to worry about attaching files, and use yours origin bandwidth

In your case you would import following in your css file:

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

You can place it in the main .css file, included by index.html. Or you can use <link> tag and include fonts in your headers (also in index.html)

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

---

Related Topics