DotNet-301-ElevenNoteAngular
  • Introduction
  • Part 1: Setup with the Angular CLI
  • Part 2: Building out the Header Component
  • Part 3: Sprucing up the Header Using Material
  • Part 4: Building the Registration Page with Reactive Angular Form
  • Part 5: Routing with Angular Router
  • Part 6: Design Break: Fonts
  • Part 7: Communicating with Web API with Auth Service
  • Part 8: Logging in with a token
  • Part 9: Routing After a Request
  • Part 10: Log In page Challenge
  • Part 11: Building the Note Index page
  • Part 12: Creating Note C.r.u.d. — Create
  • Part 13: Creating Note c.R.u.d. — Read
  • Part 14: Creating Note c.r.U.d. — Update
  • Part 15: Creating Note c.r.u.D. — Delete
  • Part 16: Protecting our views with Guards
Powered by GitBook
On this page
  • Step 1. Adding the Google Font Link
  • Step 2. Including the font to our Main Style.css file

Part 6: Design Break: Fonts

PreviousPart 5: Routing with Angular RouterNextPart 7: Communicating with Web API with Auth Service

Last updated 7 years ago

We’ve been working pretty extensively with HTML and TypeScript. Let’s have a small break and work on a few CSS needs.

Using the Material UI, there is a font family that goes really well with this library and that’s Roboto— read more . Let’s walk through including the font into our CSS.

Step 1. Adding the Google Font Link

Inside of our index.html file we are going to include the link to the google font for the Roboto font.

Under the favicon link type:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

Step 2. Including the font to our Main Style.css file

Now that we have our font downloaded from our link tag, let’s go to our style.css file and add a few lines of CSS. While we are there lets take margins and padding off of the body and the html elements.

here
Adding a Font
Small CSS Adjustments