Module Assessment | Yext Hitchhikers Platform

You must include a first name and last name in your profile to create challenge environments.

Background

Turtlehead Tacos brand marketing team wants you to use the Pangolin font in the search result cards and Roboto Mono in their search bar and autocomplete options per their brand guidelines.

Challenge

Get the embed code from Pangolin for font-weight 400 and Roboto Mono for font-weights 400 and 700.

Hint: They should look like this:

<link href="https://fonts.googleapis.com/css2?family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">

Navigate to Pages > Turtlehead Taco Search > Deploys, go to the Code Editor, and click into the master branch. You should expect this to take a couple minutes to load – in the background, it’s starting up a container for your development.
Click “View Live Preview” to open your preview in a new tab.
- Run a search for “Turtlehead” - those fonts are so boring!
You need to add the font embed codes to the head of your pages. The layouts of your pages are driven ultimately by the theme/layouts/html.hbs file. To make it easier for you to add things like fonts, we have a top-level (outside of the Theme) file for you to add anything that needs to be added to the head of the pages in your experience. This file is in layouts > headincludes.hbs. Open up the layouts > headincludes.hbs file.
Add the embed codes from Step 1 in your layouts > headincludes.hbs file.
Navigate to static > scss > answers.scss to use the font by adding in under your answers class. You want to add Pangolin for most of the search experience, but the Roboto Mono for the search bar. As a best practice, you’ll want to include ‘Open Sans’ and sans-serif as back-up fonts for both in cases where a browser can’t support your new fonts.

For the classes below, add Pangolin, 'Open Sans', sans-serif for font-family:
```
.yxt-Card,
.HitchhikerFaqAccordion-title, 
.yxt-Results-title, 
.yxt-Results-viewAllLink, 
.yxt-Results-changeFilters, 
.yxt-Results-filterValue
{
  font-family: <INSERT FONT FAMILY NAMES HERE>;
}
```
For the classes below, add 'Roboto Mono', 'Open Sans', sans-serif for font-family:
```
.yxt-AutoComplete-option--item,
.yxt-SearchBar-input
{
  font-family: <INSERT FONT FAMILY NAMES HERE>;
}
```
Use Live Preview to verify the font is working correctly. If you’re having trouble, make sure that you:
- Added the two font embed codes to the right file (layouts/headincludes.hbs)
- Added the SCSS to the right file (static/scss/answers.scss) Note: These need to be added to the top-level files and not the files in the theme
Commit your changes. Monitor the build and publish your staging experience.

Module Assessment

+<% util.points %> points

Weekly Challenge Streak: <% util.streakWeekly %>

You must include a first name and last name in your profile to create challenge environments.

Challenge account expires in <% util.expirationHours > 24 ? Math.round((util.expirationHours * 1.0) / 24) : util.expirationHours %> <% util.expirationHours > 24 ? (Math.round((util.expirationHours * 1.0) / 24) == 1 ? 'day' : 'days') : (util.expirationHours == 1 ? 'hour' : 'hours') %>.

Challenge account has expired. Please create a new account.

Report Card

Add the font embed code to the head of the layouts > headincludes.hbs file

Update the font family for the specific CSS classes to apply your new fonts

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

Feedback

<% elem.innerText %>