Typography Project: problems with the @font-face

Web Development Front-End
1

Hello I am stuck on question 7: Instead of linking the font from index.html , you realize it would be a better to import Google fonts in the files directly into stylesheets with the @font-face property.

Use the @font-face property to import the fonts directly to the stylesheets, and remove the <link> tags that reference the Google fonts from the index.html page.

I don’t know how to do the url and the format and the fonts are * Abril Fatface,
Work Sans in font-weight 400, 500, and 800.
Merriweather

3 Likes
2

Hi @digital8319312836
you haven’t linked the lesson, but from what I remember, it provides a link to the Google Webfonts Helper.
There you can browse your fonts and just copy the code for the font-face rule they provide and paste it into your CSS. You just need to adjust the paths depending on where your folder with the font is located on your computer in relation to your CSS.

3

I struggled with this one for an hour, I honestly don’t know how the guy in the explanation video did it, but I ended up using this link https://fonts.googleapis.com/css?family=Roboto (provided in step 7) and changed Roboto to Merriweather, Work+Sans, and Abril+Fatface. It is required that you use capital letters at the beginning of the word so an error doesn’t pop up. Additionally, whenever you have a multiple words composition, substitute the space with a +, and you should get all the info required to copy and paste for your font-face. i.e Work Sans = Work+Sans, Abril Fatface = Abril+Fatface.
Hope this can help you and anyone who is struggling with this step on the project.

2 Likes
4

I’m stuck on this question aswell.

This is the lesson here Task 7 is in question.

I attempt to add the @font-face ruleset to the CSS by navigating to the URL in the I successfully used to link the HTML in a previous task. Copying the ruleset from this page as suggested in the task tip results in this CSS code below. It doesn’t appear to format properly and definitely doesn’t link the fonts correctly.

image
image1747×277 15 KB

I’ve watched the walkthrough video and I don’t believe the method in the video matches up with how it should be solved.

I’m pushing ahead using the HTML link method that works but hoping someone can shed some light onto why this bit of code doesn’t work.

Thanks

5

I’m not sure, but are you copying the right Merriweather URL?

https://fonts.googleapis.com/css?family=Merriweather

Here you can see that the URL code you posted is different from those in this API document.

7

Try using this article for the solution

1 Like
8

Yes I am in full agreement with the above comments - I am having an issue with font-face instructions tasks 7-9. I would really like to see the solution as I am not quite sure what I am required to do whether to add all the fonts in font-face required or just CroissantOne
Thank you

index here:

<!DOCTYPE html>
<html>
<head>
  <title>Morocco</title>
  <link rel="stylesheet" type="text/css" href="styles/reset.css">
  <link rel="stylesheet" type="text/css" href="styles/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
  <!-- Header -->
  <nav class="header">
    <span class="logo">AOFIE CONLEAVY</span>
    <ul>
      <li><a href="#">TRAVELS</a></li>
      <li><a href="#">FICTION</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>

  <!-- Banner -->
  <div class="banner">
    <h2>DEC 20XX</h2>
    <h1>Morocco</h1>
  </div>

  <!-- Journal -->
  <div class="journal">
    <div class="first photo">
      <div class="image-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo1.png">
      </div>
      <span class="caption">A convoy of camels criss-crossing the crests of the Sahara</span>
    </div>
    <p>
      <span class="first-letter">I</span> am in the Great Sahara Desert for the third sundown in a row. Fouad and I pass back and forth a sun-bleached map of the stars. It’s more of a tug-of-war to be honest. With what remains of the daylight, we commit to memory the positions of spots on the page. We hope to find some correlation in its negative, which slides overhead as the sun rapidly dies.
    </p>
    <p>
      "Navigating by night is always easier." Fouad flicks these English words as ash from a cigarette. "You’ll see."
    </p>
    <p>
      "We won't see anything. That's my point!"
    </p>
    <p>
      How did we get here?
    </p>
    <p>
      It started eight days ago when I arrived in Malilla on the boat from Malaga. The sun hit me like a judgement as I stepped onto the gangplank. A bit about Morocco:  
    </p>
    <div class="photo">
      <div class="image-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo2.png">
      </div>
      <span class="caption">The long and winding road to Merrakec</span>
    </div>
    <p>
      Morocco has a population of over 33.8 million and an area of 446,550 km2 (172,410 sq mi). Its capital is Rabat, and the largest city is Casablanca. Other major cities include Marrakesh, Tangier, Tetouan, Sale, Fes, Agadir, Meknes, Oujda, Kenitra, and Nador. A historically prominent regional power, Morocco has a history of independence not shared by its neighbours.
    </p>
    <span class="quote">"Navigating by night is always easier."</span>
    <p>
      Since the foundation of the first Moroccan state by Idris I in 789, the country has been ruled by a series of independent dynasties, reaching its zenith under the Almoravid and Almohad dynasty, spanning parts of Iberia and Northwestern Africa. Marinid and Saadi dynasties continued the struggle against foreign domination, and Morocco remained the only North-African country to avoid Ottoman occupation. 
    </p>
    <p>
      The Alaouite dynasty, the current ruling dynasty, seized power in 1666. In 1912 Morocco was be divided into a French and Spanish protectorates, with an international zone in Tangier, and regained its independence in 1956. Moroccan culture is a blend of Arab, indigenous Berber, Sub-Saharan African, and European influences.
    </p>
    <div class="photo">
      <div class="image-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo3.png">
      </div>
      <span class="caption">A stall at the Jemaa El Fnaa street market</span>
    </div>
    <p>
      Morocco claims the non-self-governing territory of Western Sahara as its Southern Provinces. Morocco annexed the territory in 1975, leading to a guerrilla war with indigenous forces until a cease-fire in 1991. Peace processes have thus far failed to break the political deadlock.
    </p>
    <p>
      Morocco is a constitutional monarchy with an elected parliament. The King of Morocco holds vast executive and legislative powers, especially over the military, foreign policy and religious affairs. Executive power is exercised by the government, while legislative power is vested in both the government and the two chambers of parliament, the Assembly of Representatives and the Assembly of Councillors. The king can issue decrees called dahirs which have the force of law. He can also dissolve the parliament after consulting the Prime Minister and the president of the Constitutional court.
    </p>
    <span class="quote">“Navigating by night is always easier.”</span>
    <p>
      Morocco's predominant religion is Islam, and the official languages are Arabic and Tamazight. Moroccan dialect, referred to as Darija, and French are also widely spoken. Morocco is an influential member of the Arab League and a part of the Union for the Mediterranean. It has the fifth largest economy of Africa.
    </p>
    <div class="photo">
      <div class="image-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo4.png">
      </div>
      <span class="caption">The desert at night is strange and beautiful</span>
    </div>
  </div>

  <!-- Footer -->
  <footer>
    <div class="image-container">
      <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/author.png">
    </div>
    <div class="content">
      <p>
        <span class="author">Aoife Donleavy</span> has been writing on her travels for over two decades.
        After graduating from the <em>Idaho Writers' Workshop</em>, she piloted a biplane on a two-year voyage from <em>Anchorage</em>, <em>Alaska</em> to <em>Isafjorour</em>, <em>Iceland</em> stopping along the way for adventures throughout Europe.
      </p>
      <p>
        Since then, she has camped on all seven continents, and has been recognized worldwide for her spare, ageless prose. Aoife's new novel, <em>Tide Blade</em>, is currently available from <em>Walrus Publishing</em>. 
      </p>
    </div>
  </footer>
</body>
</html>

css code here:


  /* latin */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/abrilfatface/v18/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-cSZMZ-Y.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-eCZMZ-Y.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Croissant One';
  src: url('./fonts/CroissantOne-Regular.ttf') format('ttf');
}

html {
  font-size: 18px;
}

@media only screen and (max-width: 1000px) {
  html {
    font-size: 16px;
  }
}

@media only screen and (max-width: 680px) {
  html {
    font-size: 14px;
  }
}

/* Header */

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4.44rem;
  padding: 0 12%;
  background-color: white;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
  font-family: Verdana, sans-serif;
  font-size: .77rem;
  font-weight: bold;
}

.header .logo {
  flex-grow: 1;
  color: #ffb78c;
}

.header li {
  display: inline;
  padding-right: 2.22rem;
}

.header li a {
  text-decoration: none;
  color: #4a4a4a;
}

@media only screen and (max-width: 550px) {
  .header {
    flex-direction: column;
  }

  .header .logo {
    flex-grow: 0;
  }
}

/* Banner */

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50rem;
  background: url("https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/banner.jpg") center center no-repeat;
  background-size: cover;
  color: #ffb78c;
}

.banner h2 {
  padding: .55rem 0;
  border-top: 4px solid #ffb78c;
  border-bottom: 4px solid #ffb78c;
  font-size: 1.44rem;
  letter-spacing: 2px;
  font-weight: 500px;
}

.banner h1 {
  padding-top: 1.11rem;
  font-size: 11rem;
  font-weight: 900px;
}

@media only screen and (max-width: 750px) {
  .banner {
    height: 40rem;
  }

  .banner h1 {
    font-size: 8rem;
    font-family: "Abril Fatface", sans-serif;
  }
}

@media only screen and (max-width: 530px) {
  .banner {
    height: 30rem;
  }

  .banner h2 {
    font-size: 6rem;
    font-family: "Work Sans", "Arial", sans-serif;
  }
}

/* Journal */

.journal {
  padding: 0 25% 4rem 25%;
  background-color: rgb(254, 231, 218);
  color: #4a4a4a;
  line-height: 1.4;
  font-family: "Work Sans" serif;
}

.photo {
  width: 75%;
  padding: 1.11rem;
  border-radius: 5px;
  margin: 0 auto 4.44rem auto;
  background-color: white;
}

.photo .image-container {
  overflow: hidden;
  margin-bottom: 1.11rem;
}

.photo .image-container img {
  width: 100%;
}

.photo .caption {
  font-style: italic;
  font-family: "Merriweather", serif;
}

.photo.first {
  position: relative;
  top: -2.77rem;
  margin-bottom: 1.67rem;
}

.journal p {
  padding-bottom: 2.77rem;
  font-size: 1.5rem;
}

.journal .first-letter {
  float: left;
  padding-right: 1.4rem;
  font-family: "Abril Fatface", serif;
  font-size: 7.44rem;
  color: #10b0d8;
  line-height: .87;
}

.quote {
  display: block;
  padding: 4.44rem 0;
  margin-bottom: 3.33rem;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  text-align: center;
  font-size: 3.55rem;
  font-weight: 800;
  line-height: 1.2;
}

@media only screen and (max-width: 680px) {
  .journal {
    padding: 0 10% 4rem 10%;
  }
}

/* Footer */

footer {
  display: flex;
  align-items: center;
  padding: 0 1%;
  background-color: #212121;
  line-height: 1.5;
}

footer .image-container {
  width: 400px;
}

footer .content {
  flex-grow: 1;
  font-style: italic;
  color: #9b9b9b;
}

footer p {
  padding-bottom: 1.66rem;
}

footer p:last-child {
  padding-bottom: 0;
}

footer .author {
  color: #ffb78c;
}

footer em {
  color: #cfcfcf;
}

@media only screen and (max-width: 750px) {
  footer {
    flex-direction: column;
    padding: 0 10% 2rem 10%;
  }

  footer .image-container {
    height: 300px;
    margin-bottom: 2rem;
    overflow: hidden;
  }
}
2 Likes
9

Hello Sara,

I think your solution is the good one from what they are asking in the instructions tasks, but better just do like gouravgv1 :slightly_smiling_face:

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap');

or download the files and do the font-face thingy .

just missing the Work Sans I think
/* latin */

@font-face {
  font-family: 'Work Sans rev=1';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Have a nice day

1 Like
10

Task #7 of Typography project is really challenging. It made me watch more than one video and read more than one article. But I figured it out! Here’s how to do it properly.

First you need to go to the website Google Fonts Helper.

Find each font and download zip files. Unpack them and upload to Codecademy working terminal.
12333

Next copy all CSS @font-face code from that site again Google Fonts Helper. (Don’t forget change the path in CSS code. Codecademy terminal allows to upload files only direct to root folder.)

Here is a piece of CSS code:

/* merriweather-italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: url('/merriweather-v30-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/merriweather-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/merriweather-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/merriweather-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/merriweather-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/merriweather-v30-latin-italic.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('/merriweather-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/merriweather-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/merriweather-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/merriweather-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/merriweather-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/merriweather-v30-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('/merriweather-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/merriweather-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/merriweather-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/merriweather-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/merriweather-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/merriweather-v30-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* abril-fatface-regular - latin */
/* abril-fatface-regular - latin */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  src: url('/abril-fatface-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/abril-fatface-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/abril-fatface-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/abril-fatface-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/abril-fatface-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/abril-fatface-v19-latin-regular.svg#AbrilFatface') format('svg'); /* Legacy iOS */
}
/* work-sans-regular - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/work-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/work-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/work-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/work-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/work-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/work-sans-v18-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-500 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/work-sans-v18-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/work-sans-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/work-sans-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/work-sans-v18-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/work-sans-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/work-sans-v18-latin-500.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-800 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/work-sans-v18-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/work-sans-v18-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/work-sans-v18-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/work-sans-v18-latin-800.woff') format('woff'), /* Modern Browsers */
       url('/work-sans-v18-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/work-sans-v18-latin-800.svg#WorkSans') format('svg'); /* Legacy iOS */
}

And now everything works fine and the task is completed properly.

p.s. Now I have figured out @font-face :slight_smile:

1 Like
11

Hello All,

The instructions for sure could have been clearer.

Short answer: the key is in the hint … " Copy and paste the @font-face rule from the /* latin */ sections of the rule set at the href of the font from Google."

1- Where is this href? It’s the URL contained in the href portion of the code you put in the header of the HTML file linking all three fonts. You can also grab this link in the “link” or “@import” sections when you’re grabbing the code from Google to stick in your HTML header. (In this case, the link is “https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap”)

2- Take that URL and paste it into your web browser and load the page. There you will see the various @font-face declarations for the different fonts and their variations. I personally did a “Find” on the page for “latin”, and I could easily locate the various @font-face portions to paste at the top of the CSS file.

Done.

1 Like
12

This work for me,
1.-I download the fonts from GoogleFonts, and upload in the CodeCademy Folder.
2.- I change the name of the fonts, and also change the name when i put the rule font-family

@font-face {
font-family: ‘Merriweather’;
font-style: normal, italic;
font-weight: 400;
src: url(‘/Merriweather.ttf’); /* IE9 Compat Modes /
src: local(‘’),
url(‘/Merriweather.ttf’) format(‘truetype’), / Safari, Android, iOS */
}

@font-face {
font-family: ‘AbrilFatface’;
font-style: normal;
font-weight: 400;
src: url(‘/AbrilFatface.ttf’); /* IE9 Compat Modes /
src: local(‘’),
url(‘/AbrilFatface.ttf’) format(‘truetype’), / Safari, Android, iOS */
}

@font-face {
font-family: ‘WorkSans’;
font-style: normal;
font-weight: 400, 500, 800;
src: url(‘/WorkSans.ttf’); /* IE9 Compat Modes /
src: local(‘’),
url(‘/WorkSans.ttf’) format(‘truetype’), / Safari, Android, iOS */
}

@font-face {
font-family: ‘WorkSans’;
font-style: normal;
font-weight: 800;
src: url(‘/WorkSans-ExtraBold.ttf’); /* IE9 Compat Modes /
src: local(‘’),
url(‘/WorkSans-ExtraBold.ttf’) format(‘truetype’), / Safari, Android, iOS */
}

13

I was overthinking this one for a while. No need to download and put the files into the workspace. My guess is the unicode-range has something to do with why the font wasn’t downloading or linking to style.css, unicode-range - CSS: Cascading Style Sheets | MDN. The font-display I can’t recall learning yet either. I was originally just putting the URL and format without the full rule.

  1. Go to the href from the link tag you put in html.index: https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap.

  2. Literally copy and paste the entire @font-face rule for every style commented out as //Latin// at the top of style.css

  3. It would look like this:

@font-face {
font-family: ‘Abril Fatface’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/abrilfatface/v19/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: ‘Merriweather’;
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4m0qyriQwlOrhSvowK_l5-eRZOf-I.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: ‘Merriweather’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: ‘Work Sans’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: ‘Work Sans’;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: ‘Work Sans’;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

14

Ah I see I was beat to it :sweat_smile:

16

I have tried the solution that you have provided. I could be missing something but it still not working.

1 Like
17

Thank you for this, I was also having trouble figuring this part out. However, when I use this method the double slashes // in the url becomes a comment and comments out the rest of the link. Are there any solutions for this?

1 Like
18

This is what I did… However, for me there is a greying out of the code at the semi-colon after https in the src: url() statement which extends to the end of the ‘format’ statement. Unicode-range statement goes back to color coding.

It’s terribly frustrating and I wasn’t about to download and then upload the fonts as some of the commenters did, as even though that works, it wasn’t in the instruction set. So basically, as in the video solution that I watched afterward, this should work.

I’m using Brave browser, so wondering if that is an issue only in Brave?

@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/abrilfatface/v19/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
19

Note that when I pasted my code into the text box here in the Codecademy Forum, it did not grey out the statement. The italics below is greyed out within my assignment:

src: url(https://fonts.gstatic.com/s/abrilfatface/v19/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format(‘woff2’);

20

same issue for me - double slash comments the rest of the line. haven’t found the solution yet, but please let me know if you do!

1 Like
22

I really cant understand and this lesson doesnt have a video which could be really helpful
I dont understand these 2 tasks:
7. Looking at the page, the author suggests the page would really come together if we used a specific font, CroissantOne-Regular.ttf, in the footer. The files have been downloaded and added to our project within the fonts directory within the styles/ directory where our CSS files are stored.

To complete the task you need to use the @font-face property to make these fonts accessible in the stylesheets. Name the font "Croissant One".

  1. Now that you have a @font-face rule, set the font-family property of the footer to "Croissant One" with "Merriweather" and serif as the fallback fonts.

How I can see right solution for it?