{"id":9692,"date":"2020-08-01T22:17:15","date_gmt":"2020-08-02T03:17:15","guid":{"rendered":"https:\/\/krisbunda.com\/blog\/?p=9692"},"modified":"2020-08-02T01:40:36","modified_gmt":"2020-08-02T06:40:36","slug":"use-2-fonts-in-your-angular-material-custom-typography-config","status":"publish","type":"post","link":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/","title":{"rendered":"Use 2 Fonts in Your Angular Material Custom Typography Config"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">So, you like <a aria-label=\"Angular (opens in a new tab)\" href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a>, and you like <a aria-label=\"Angular.Material (opens in a new tab)\" href=\"https:\/\/material.angular.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular.Material<\/a> for styling, theming, and ready-made components that fit a coherent design language. But you still want to make customizations; in this case, to the <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/material.angular.io\/guide\/typography#customization\" target=\"_blank\" rel=\"noreferrer noopener\">mat-typography-config<\/a>. More specifically: create a custom config with a <a aria-label=\"different font family for title headings and body text (opens in a new tab)\" href=\"https:\/\/stackoverflow.com\/questions\/53277193\/using-two-different-fonts-in-angular-material\" target=\"_blank\" rel=\"noreferrer noopener\">different font family for title headings and body text<\/a>, and get both configs to work in an override.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the last sentence, I linked to a stack overflow question where a user answers how to do this. I&#8217;ll show you what I was trying to do, I&#8217;ll try to get it to work the way the stack exchange user shows (it&#8217;s less <a aria-label=\"DRY  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noreferrer noopener\">DRY <\/a>than what I was trying to do, but whatever works). Then I&#8217;ll tell you which one I think is worth a try to get 2 Angular.Material custom typography configs (each with their own, different font-family) to both be added to a typography override and both work.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-1-1200x1298.png\"><img decoding=\"async\" width=\"1200\" height=\"1298\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-1-1200x1298.png\" alt=\"\" data-id=\"9696\" class=\"wp-image-9696\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-1-1200x1298.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-1-600x649.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-1-139x150.png 139w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-1-1420x1536.png 1420w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-1.png 1671w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG 1<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here I was setting up 2x custom mat-typography-configs (red squared), one for Title headings, with the <a aria-label=\"Roboto Condensed font (opens in a new tab)\" href=\"https:\/\/fonts.google.com\/specimen\/Roboto+Condensed\" target=\"_blank\" rel=\"noreferrer noopener\">Roboto Condensed font<\/a>, the other for Body text, with the regular <a aria-label=\"Roboto font (opens in a new tab)\" href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" target=\"_blank\" rel=\"noreferrer noopener\">Roboto font<\/a> (blue squared). <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).\n@include mat-base-typography($custom-name-typography);\n\n\/\/ Override typography for all Angular Material, including mat-base-typography and all components.\n@include angular-material-typography($custom-name-typography); \n\n\/\/ Override the typography in the core CSS.\n@include mat-core($custom-name-typography);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The problem is: there seems to be room for only one custom typography config per Material Typography override (light-green squared). By &#8220;overrides&#8221; I mean the <a aria-label=\" 3 different ones Angular.Material lists in their typography section (opens in a new tab)\" href=\"https:\/\/material.angular.io\/guide\/typography#customization\" target=\"_blank\" rel=\"noreferrer noopener\">3 different ones Angular.Material lists in their typography section<\/a>, as shown above.  <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-2-1200x1159.png\"><img decoding=\"async\" width=\"1200\" height=\"1159\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-2-1200x1159.png\" alt=\"\" data-id=\"9698\" class=\"wp-image-9698\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-2-1200x1159.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-2-600x580.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-2-150x145.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-2-1536x1484.png 1536w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-2.png 1950w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG 2<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can see how I tried to shoehorn 2 different configs into an override, separated by comma (circled red), and the compiler rejects it. But it will compile this scheme if separated by the word &#8220;and&#8221;, which is an <a aria-label=\"SCSS boolean operator (opens in a new tab)\" href=\"https:\/\/sass-lang.com\/documentation\/operators\/boolean\" target=\"_blank\" rel=\"noreferrer noopener\">SCSS boolean operator<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-3-1200x1296.png\"><img decoding=\"async\" width=\"1200\" height=\"1296\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-3-1200x1296.png\" alt=\"\" data-id=\"9699\" class=\"wp-image-9699\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-3-1200x1296.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-3-600x648.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-3-139x150.png 139w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-3-1422x1536.png 1422w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-3.png 1554w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG 3<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Yet, while I&#8217;m trying to tell the code I want to include both configs in one override, I either don&#8217;t understand the proper syntax to write, or this is not supposed to be done, as it exhibits some unwanted and erratic behavior. Sometimes it works, sometimes it makes a text element too large or too small.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p><em><mark class=\"kt-highlight\">&#8230; some testing time passes &#8230;<\/mark><\/em><\/p><cite>&#8212; Testy McGee<\/cite><\/blockquote><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Maybe This Works?<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Override typography for all Angular Material, including mat-base-typography and all components\n\n@include angular-material-typography($custom-heading-typography and $custom-body-typography);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;m starting to be torn on this, because it looks like the most elegant or intuitive solution, to me, for getting 2 configs in a single override. And the last few times I compiled this, searching for an example of how this scheme blows up paragraphs or span elements, I suddenly can&#8217;t find any issues&#8230; so maybe it is a correct solution?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The Correct Order&#8230;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">One way to get unwanted behavior to reappear is to change the order of the configs. Notice this sidenav drawer&#8217;s toolbar text; it&#8217;s too large now. Actually, all the text is a little wrong. And it happened when I changed the order of the configs in the override (yellow and blue squared).<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-4-1200x920.png\"><img decoding=\"async\" width=\"1200\" height=\"920\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-4-1200x920.png\" alt=\"\" data-id=\"9700\" class=\"wp-image-9700\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-4-1200x920.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-4-600x460.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-4-150x115.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-4.png 1250w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG 4<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now when I switch the order back, the fonts seem to behave much more as expected. (Back to the order the configs are defined above&#8230; Is that what matters??) <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-5-1200x894.png\"><img decoding=\"async\" width=\"1200\" height=\"894\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-5-1200x894.png\" alt=\"\" data-id=\"9701\" class=\"wp-image-9701\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-5-1200x894.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-5-600x447.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-5-150x112.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-5.png 1264w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG 5<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Does it work then? <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I dunno. I&#8217;m going to try it another way and see if it seems more predictable. Meanwhile, here&#8217;s an example of the 2 configs and at the bottom, adding them both to an override simply by adding the &#8220;and&#8221; operator between the 2 configs. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ First custom Material typography config\n$custom-heading-typography: mat-typography-config(\n  \/* First font family ('Roboto Condensed') *\/\n  $font-family: $title-font,\n  \/\/ ...\n  $display-1: mat-typography-level($d1, $title-line-ht, $regular),\n  $headline: mat-typography-level($h1, $title-line-ht, $regular),\n  \/\/ ...\n);\n\/\/ Second custom Material typography config\n$custom-body-typography: mat-typography-config(\n  \/* Second font family ('Roboto') *\/\n  $font-family: $primary-font,\n  \/\/ ...\n  $body-2: mat-typography-level($primary-fs, $primary-line-ht, $medium),\n  $caption: mat-typography-level($primary-fs, $caption-line-ht, $light),\n  \/\/ ...\n);\n\n\/\/ Override typography for all Angular Material, including mat-base-typography and all components.\n\/* This works if you put the typography configs in the correct order!? *\/\n@include angular-material-typography($custom-heading-typography and $custom-body-typography); \n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Let&#8217;s try 2 font families, 1 Config?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I couldn&#8217;t get this to work. It blew up more elements than anything else: <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-7 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-6-1200x1319.png\"><img decoding=\"async\" width=\"1200\" height=\"1319\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-6-1200x1319.png\" alt=\"\" data-id=\"9702\" class=\"wp-image-9702\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-6-1200x1319.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-6-600x660.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-6-136x150.png 136w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-6-1397x1536.png 1397w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-6.png 1552w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG 6<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Notice I combined the 2 configs into one, named simply &#8220;custom-typography&#8221;, and added the other font-family inline, as the 4th attribute of a &#8220;mat-typography-level()&#8221; method. Then there&#8217;s only one config to add to the override (I was thinking my problem before was trying to add multiple configs to one override&#8211;but now it may just be the ordering problem.)<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-8 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"1200\" height=\"731\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-7-1200x731.png\" alt=\"\" data-id=\"9704\" class=\"wp-image-9704\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-7-1200x731.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-7-600x365.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-7-150x91.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-7-1536x936.png 1536w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-7-80x50.png 80w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-7.png 1678w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"blocks-gallery-item__caption\">ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG 8<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I also tried describing the Roboto family in various ways&#8211;as a variable with quotes, without quotes, as just the font-family name with quotes (Angular wants font names passed as strings)&#8230; Almost everything compiled, yet nothing seemed to suddenly fix every text element, so the app could appear as designed. I also stopped the compiler, restarted &#8216;ng serve,&#8217; and refreshed the browser a few times to try getting the scheme to work&#8211;it didn&#8217;t matter.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-9 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-8-1200x642.png\"><img decoding=\"async\" width=\"1200\" height=\"642\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-8-1200x642.png\" alt=\"\" data-id=\"9705\" class=\"wp-image-9705\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-8-1200x642.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-8-600x321.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-8-150x80.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-8-1536x821.png 1536w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/image-8.png 1702w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG 9<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">So I&#8217;m going to say this 2nd way won&#8217;t work, and perhaps the other way I tried <em>will <\/em>work&#8211;or is worth a try&#8230; Just make sure you order the various configs as they &#8216;want to be&#8217; ordered (possibly the same order as they&#8217;re described in your style sheet.) <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I figure this stuff out as I go, so if you know it already, and can explain exactly how to get 2 different custom Angular mat-typography-configs with 2 different font-families to work seamlessly, please let us know in the comments or send me an email and I&#8217;ll update this post. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, you like Angular, and you like Angular.Material for styling, theming, and ready-made components that fit a coherent design language. But you still want to make customizations to the mat-typography-config. More specifically: create a custom config with a different font family for title headings and body text, and get both configs to work in an override.<\/p>\n","protected":false},"author":1,"featured_media":9707,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","om_disable_all_campaigns":false,"inline_featured_image":false,"kt_blocks_editor_width":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[791,780,792,773,245,36,772],"class_list":["post-9692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer","tag-angular","tag-css","tag-material","tag-code","tag-troubleshooting","tag-tutorial","tag-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Kris Bunda\"\/>\n\t<meta name=\"google-site-verification\" content=\"nClePLp4QbLXXv7FON_y2QT65NP7LibU8DWgB3TaPyY\" \/>\n\t<meta name=\"msvalidate.01\" content=\"D9A2CA8C318137423BE8EC5CD4C5DBBE\" \/>\n\t<meta name=\"p:domain_verify\" content=\"6096666fee42f7673dae5027429ae8fd\" \/>\n\t<meta name=\"keywords\" content=\"angular,css,material,code,troubleshooting,tutorial,web development\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Kris Bunda Design\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design\" \/>\n\t\t<meta property=\"og:description\" content=\"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t\t<meta property=\"article:tag\" content=\"angular\" \/>\n\t\t<meta property=\"article:tag\" content=\"css\" \/>\n\t\t<meta property=\"article:tag\" content=\"material\" \/>\n\t\t<meta property=\"article:tag\" content=\"code\" \/>\n\t\t<meta property=\"article:tag\" content=\"troubleshooting\" \/>\n\t\t<meta property=\"article:tag\" content=\"tutorial\" \/>\n\t\t<meta property=\"article:tag\" content=\"web development\" \/>\n\t\t<meta property=\"article:tag\" content=\"designer\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2020-08-02T03:17:15+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-08-02T06:40:36+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@KrisBunda3D\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@KrisBunda3D\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png\" \/>\n\t\t<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t\t<meta name=\"twitter:data1\" content=\"Kris Bunda\" \/>\n\t\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#article\",\"name\":\"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design\",\"headline\":\"Use 2 Fonts in Your Angular Material Custom Typography Config\",\"author\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/ANGULAR-MATERIAL-2-FONTS-CUSTOM-TYPOGRAPHY-CONFIG-COVER.png\",\"width\":2088,\"height\":1724,\"caption\":\"ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG COVER\"},\"datePublished\":\"2020-08-01T22:17:15-05:00\",\"dateModified\":\"2020-08-02T01:40:36-05:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#webpage\"},\"articleSection\":\"Designer, Angular, CSS, Material, code, troubleshooting, tutorial, web development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/krisbunda.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"name\":\"Designer\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"position\":2,\"name\":\"Designer\",\"item\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#listItem\",\"name\":\"Use 2 Fonts in Your Angular Material Custom Typography Config\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#listItem\",\"position\":3,\"name\":\"Use 2 Fonts in Your Angular Material Custom Typography Config\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"name\":\"Designer\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\",\"name\":\"Kris Bunda\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r\",\"width\":96,\"height\":96,\"caption\":\"Kris Bunda\"},\"sameAs\":[\"@KrisBunda3D\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/\",\"name\":\"Kris Bunda\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r\",\"width\":96,\"height\":96,\"caption\":\"Kris Bunda\"},\"sameAs\":[\"@KrisBunda3D\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#webpage\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/\",\"name\":\"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design\",\"description\":\"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/ANGULAR-MATERIAL-2-FONTS-CUSTOM-TYPOGRAPHY-CONFIG-COVER.png\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#mainImage\",\"width\":2088,\"height\":1724,\"caption\":\"ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG COVER\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2020\\\/08\\\/01\\\/use-2-fonts-in-your-angular-material-custom-typography-config\\\/#mainImage\"},\"datePublished\":\"2020-08-01T22:17:15-05:00\",\"dateModified\":\"2020-08-02T01:40:36-05:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/\",\"name\":\"Kris Bunda Design\",\"description\":\"Creative Development & Technical How-Tos\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design","description":"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.","canonical_url":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/","robots":"max-image-preview:large","keywords":"angular,css,material,code,troubleshooting,tutorial,web development","webmasterTools":{"google-site-verification":"nClePLp4QbLXXv7FON_y2QT65NP7LibU8DWgB3TaPyY","msvalidate.01":"D9A2CA8C318137423BE8EC5CD4C5DBBE","p:domain_verify":"6096666fee42f7673dae5027429ae8fd","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#article","name":"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design","headline":"Use 2 Fonts in Your Angular Material Custom Typography Config","author":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"publisher":{"@id":"https:\/\/krisbunda.com\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/ANGULAR-MATERIAL-2-FONTS-CUSTOM-TYPOGRAPHY-CONFIG-COVER.png","width":2088,"height":1724,"caption":"ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG COVER"},"datePublished":"2020-08-01T22:17:15-05:00","dateModified":"2020-08-02T01:40:36-05:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#webpage"},"isPartOf":{"@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#webpage"},"articleSection":"Designer, Angular, CSS, Material, code, troubleshooting, tutorial, web development"},{"@type":"BreadcrumbList","@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/krisbunda.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","name":"Designer"}},{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","position":2,"name":"Designer","item":"https:\/\/krisbunda.com\/blog\/category\/designer\/","nextItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#listItem","name":"Use 2 Fonts in Your Angular Material Custom Typography Config"},"previousItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#listItem","position":3,"name":"Use 2 Fonts in Your Angular Material Custom Typography Config","previousItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","name":"Designer"}}]},{"@type":"Person","@id":"https:\/\/krisbunda.com\/blog\/#person","name":"Kris Bunda","image":{"@type":"ImageObject","@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r","width":96,"height":96,"caption":"Kris Bunda"},"sameAs":["@KrisBunda3D"]},{"@type":"Person","@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author","url":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/","name":"Kris Bunda","image":{"@type":"ImageObject","@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r","width":96,"height":96,"caption":"Kris Bunda"},"sameAs":["@KrisBunda3D"]},{"@type":"WebPage","@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#webpage","url":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/","name":"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design","description":"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/krisbunda.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#breadcrumblist"},"author":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"creator":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/ANGULAR-MATERIAL-2-FONTS-CUSTOM-TYPOGRAPHY-CONFIG-COVER.png","@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#mainImage","width":2088,"height":1724,"caption":"ANGULAR MATERIAL 2 FONTS CUSTOM TYPOGRAPHY CONFIG COVER"},"primaryImageOfPage":{"@id":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/#mainImage"},"datePublished":"2020-08-01T22:17:15-05:00","dateModified":"2020-08-02T01:40:36-05:00"},{"@type":"WebSite","@id":"https:\/\/krisbunda.com\/blog\/#website","url":"https:\/\/krisbunda.com\/blog\/","name":"Kris Bunda Design","description":"Creative Development & Technical How-Tos","inLanguage":"en-US","publisher":{"@id":"https:\/\/krisbunda.com\/blog\/#person"}}]},"og:locale":"en_US","og:site_name":"Kris Bunda Design","og:type":"article","og:title":"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design","og:description":"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.","og:url":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/","og:image":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png","og:image:secure_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png","og:image:width":1920,"og:image:height":1080,"article:tag":["angular","css","material","code","troubleshooting","tutorial","web development","designer"],"article:published_time":"2020-08-02T03:17:15+00:00","article:modified_time":"2020-08-02T06:40:36+00:00","twitter:card":"summary_large_image","twitter:site":"@KrisBunda3D","twitter:title":"Use 2 Fonts in Your Angular Material Custom Typography Config | Kris Bunda Design","twitter:description":"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.","twitter:creator":"@KrisBunda3D","twitter:image":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png","twitter:label1":"Written by","twitter:data1":"Kris Bunda","twitter:label2":"Est. reading time","twitter:data2":"5 minutes"},"aioseo_meta_data":{"post_id":"9692","title":null,"description":"Customize Angular.Material, Create custom mat-typography-config with different font-families for title headings or body text, get both configs to work in an override.","keywords":"","keyphrases":null,"primary_term":null,"canonical_url":"","og_title":"","og_description":"","og_object_type":"article","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":"","og_article_tags":"","twitter_use_og":false,"twitter_card":"summary_large_image","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2021-07-16 06:46:42","updated":"2026-01-28 23:40:48","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/krisbunda.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/krisbunda.com\/blog\/category\/designer\/\" title=\"Designer\">Designer<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tUse 2 Fonts in Your Angular Material Custom Typography Config\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/krisbunda.com\/blog"},{"label":"Designer","link":"https:\/\/krisbunda.com\/blog\/category\/designer\/"},{"label":"Use 2 Fonts in Your Angular Material Custom Typography Config","link":"https:\/\/krisbunda.com\/blog\/2020\/08\/01\/use-2-fonts-in-your-angular-material-custom-typography-config\/"}],"taxonomy_info":{"category":[{"value":4,"label":"Designer"}],"post_tag":[{"value":791,"label":"Angular"},{"value":780,"label":"CSS"},{"value":792,"label":"Material"},{"value":773,"label":"code"},{"value":245,"label":"troubleshooting"},{"value":36,"label":"tutorial"},{"value":772,"label":"web development"}]},"featured_image_src_large":["https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/ANGULAR-MATERIAL-2-FONTS-CUSTOM-TYPOGRAPHY-CONFIG-COVER-1200x991.png",1200,991,true],"author_info":{"display_name":"Kris Bunda","author_link":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/"},"comment_info":0,"category_info":[{"term_id":4,"name":"Designer","slug":"designer","term_group":0,"term_taxonomy_id":4,"taxonomy":"category","description":"Posts focusing on web, graphic, CAD, and other design.","parent":0,"count":91,"filter":"raw","cat_ID":4,"category_count":91,"category_description":"Posts focusing on web, graphic, CAD, and other design.","cat_name":"Designer","category_nicename":"designer","category_parent":0}],"tag_info":[{"term_id":791,"name":"Angular","slug":"angular","term_group":0,"term_taxonomy_id":795,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":780,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":784,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":792,"name":"Material","slug":"material","term_group":0,"term_taxonomy_id":796,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":773,"name":"code","slug":"code","term_group":0,"term_taxonomy_id":777,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":245,"name":"troubleshooting","slug":"troubleshooting","term_group":0,"term_taxonomy_id":245,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":36,"name":"tutorial","slug":"tutorial","term_group":0,"term_taxonomy_id":36,"taxonomy":"post_tag","description":"","parent":0,"count":33,"filter":"raw"},{"term_id":772,"name":"web development","slug":"web-development","term_group":0,"term_taxonomy_id":776,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"}],"jetpack_featured_media_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/08\/ANGULAR-MATERIAL-2-FONTS-CUSTOM-TYPOGRAPHY-CONFIG-COVER.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/comments?post=9692"}],"version-history":[{"count":10,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9692\/revisions"}],"predecessor-version":[{"id":9714,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9692\/revisions\/9714"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media\/9707"}],"wp:attachment":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media?parent=9692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/categories?post=9692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/tags?post=9692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}