The Mockup and the Starter Layout

Learn how to integrate Google fonts into the layout and create a layout prototype.

Google Fonts

We’ll use two fonts for this layout—Roboto and Roboto Slab. Both fonts are available on the Google Fonts website. Once we’ve found the font we like, we have a little "plus" icon to the right of the font name. If we click it, the specific font will be added to the list of font families selected, shown in a toggleable bar at the bottom of the screen.

Here are our two options for embedding fonts:

  1. To import our fonts with the standard syntax, we use the HTML <link> tag generated by Google Fonts, like this.

Get hands-on with 1200+ tech skills courses.