Sign Up

Sign In

Forget Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

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

  • 0

I have been working on an Angular 4 personal project, and wanted to add the Ubuntu font family to my Angular application. What is the best practice or style for adding a number of custom fonts to a project? I currently have saved the ubuntu font family into /assets/fonts/ubuntu-font-family-0.83 and added it to the outer most component CSS file, app.component.css with font face.

@font-face {
   font-family: 'Ubuntu';
   src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf');
}

By putting this in the original component I don’t have to redefine the font in nested components i just treat it like a default font-family.

Is there a clearer/better way to do this and still cut out duplicate code?

Click to rate this post!
[Total: 0 Average: 0]
Share This Post
Share
  1. 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">
    • 0
Leave an answer

Leave an answer

Browse

close