Angular Material And Changing Fonts


Answer :

You can use the CSS universal selector (*) in your CSS or SCSS:

* {   font-family: Raleway /* Replace with your custom font */, sans-serif !important;    /* Add !important to overwrite all elements */ }

Starting from Angular Material v2.0.0-beta.7, you can customise the typography by creating a typography configuration with the mat-typography-config function and including this config in the angular-material-typography mixin:

@import '~@angular/material/theming'; $custom-typography: mat-typography-config(   $font-family: 'Raleway' );  @include angular-material-typography($custom-typography);

Alternatively (v2.0.0-beta.10 and up):

// NOTE: From `2.0.0-beta.10`, you can now pass the typography via the mat-core() mixin: @import '~@angular/material/theming'; $custom-typography: mat-typography-config(   $font-family: 'Raleway' ); @include mat-core($custom-typography);

Refer to Angular Material's typography documentation for more info.

Note: To apply the fonts, add the mat-typography class to the parent where your custom fonts should be applied:

<body class="mat-typography">   <h1>Hello, world!</h1>   <!-- ... --> </body>

From this official guide:

Typography customization is an extension of Angular Material's Sass-based theming. Similar to creating a custom theme, you can create a custom typography configuration.

So, include this line in your index.html file, linking to some external font:

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

Then put in your styles.scss file the custom typography settings, adjusting the font-family string for the selected font:

@import '~@angular/material/theming';  $custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;'); @include mat-core($custom-typography);

A full custom theme, with colors and all, is something like:

@import '~@angular/material/theming';  $custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;'); @include mat-core($custom-typography);  $custom-primary: mat-palette($mat-blue); $custom-accent: mat-palette($mat-amber); $custom-theme: mat-light-theme($custom-primary, $custom-accent); @include angular-material-theme($custom-theme);

That's it.

You can find more info about custom typography in this post.

The font used in the samples are from Google Fonts.


Comments

Post a Comment

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Answer : VACUUM is only needed on updated or deleted rows in non-temporary tables. Obviously you're doing lots of INSERTs but it's not obvious from the description that you're also doing lots of UPDATEs or DELETEs. These operations can be tracked with the pg_stat_all_tables view, specifically the n_tup_upd and n_tup_del columns. Also, even more to the point, there is a n_dead_tup column that tells, per table, how much rows need to be vacuumed. (see Monitoring statistics in the doc for functions and views related to statistics gathering). A possible strategy in your case would be to suppress the scheduled VACUUM, keeping an eye on this view and checking on which tables the n_dead_tup is going up significantly. Then apply the aggressive VACUUM to these tables only. This will be a win if there are large tables whose rows never get deleted nor updated and the aggressive VACUUM is really necessary only on smaller tables. But keep running the ANALYZE for the optimiz
Read more

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?

Answer : Diagram machinery works also for perturbation theory in classical statistical mechanics and classical field theories. Generally, various kinds of diagrams constitute a pictorial way of talking about tensor products and their contractions while hiding the multi-linear algebra from the layman. In the simplest case, vertices (or blobs) represent vectors, matrices, tensors; vertices have ingoing and/or outgoing ports; ingoing ports denote (contravariant) ro indices; outgoing ports denote (covariant) co indices; directed arcs between blobs give a pair of equal indices summed over; different base spaces ⇔ \Leftrightarrow ⇔ different arc types; symmetric tensors ⇔ \Leftrightarrow ⇔ undirected diagrams; no labels are needed for internal lines. In many cases, the directed arcs are decorated (as thin, thick, broken,wavy, curly lines), each decoration indicating the presence of a so-called propagator, a function of its label to use as a weight in the sum, which may beco
Read more