Import Fonts Error In Build An Event Flyer Page

by ADMIN 48 views

Describe the Issue

When using an import font from Google, it seems that Tests 16 and 17 (which requires the hr and section element to have a width with a percentage value) do not register the code even if it complies with the requirements. This issue is encountered on the Build an Event Flyer page on FreeCodeCamp.

Affected Page

The affected page is located at https://www.freecodecamp.org/learn/full-stack-developer/lab-event-flyer-page/build-an-event-flyer-page.

Your Code

The code used is as follows:

/* || IMPORT GOOGLE FONT LINKS */
@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&family=Jacques+Francois+Shadow&family=Joan&family=Lexend+Deca:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* || RESET */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea {
  font: inherit;
}

/* || VARIABLES */
/* CHANGE THE DATA BELOW AS NEEDED */
:root {
  /* FONTS */
  --FF: "Nunito", sans-serif;
  --FS: clamp(1.25rem, 2.2vh, 1.75rem);

  /* COLORS */
  --BGCOLOR: #ffc6b2;
  --BGCOLOR-FADE1: #ffd3c1;
  --BGCOLOR-FADE2: #fff1de;
  --BGCOLOR-FADE3: #fff5e4;
  --BG-IMAGE: linear-gradient(
    45deg,
    var(--BGCOLOR),
    var(--BGCOLOR-FADE1),
    var(--BGCOLOR-FADE2),
    var(--BGCOLOR-FADE3)
  );
  --BGCOLOR-SECTION: #faf2e4;
  --BORDER-COLOR: #582d41;
  --FONT-COLOR: #582d41;
  --FONT-COLOR-ALT: #000;

  /* BORDERS */
  --BORDERS: 2px solid var(--BORDER-COLOR);

  /* SHADOWS */
  --BOX-SHADOW: 0px 3px 5px rgba(0, 0, 0, 0.3);

  /* PADDINGS */
  --PADDING-TB-TEXT: 0.25em;
  --PADDING-SIDE-TEXT: 2.5%;
  --PADDING-TB-BODY: 50px;

  /* MARGINS */
  --MARGIN-TEXT: clamp(1em, 2.5vh, 1.5em) 0;
  --MARGIN-HEADER: 0.25em;
  --MARGIN-BODY: 0 auto;
}

/* || UTILITY CLASSES */
.offscreen {
  position: absolute;
  left: -10000px}

.nowrap {
  white-space: nowrap;
}

.center {
  text-align: center;
}

/* || GENERAL STYLES */
html {
  scroll-behavior: smooth;
  font-size: var(--FS);
  font-family: var(--FF);
  background-color: var(--BGCOLOR);
  background-image: var(--BG-IMAGE);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body {
  color: var(--FONT-COLOR);
  padding-top: 50px;
  padding-bottom: 50px;
  min-height: calc(100vh - 100px);
  width: 80vw;
  margin: 0 auto;
}

p {
  line-height: 1.5;
}

/* || HEADER */
.header {
  text-align: center;
}

.header__img {
  margin: auto;
  width: 50vw;
  min-width: 300px;
  border-radius: 100px;
  opacity: 0.8;
  transition: all 0.6s ease-in-out;
}

.header__img:hover {
  opacity: 1;
  box-shadow: var(--BOX-SHADOW);
}

.header__h1,
.header__h2 {
  text-transform: uppercase;
  margin: var(--MARGIN-HEADER);
  text-align: center;
}

.header__h1 {
  font-weight: 800;
}

.header__h2 {
  color: var(--FONT-COLOR-ALT);
  margin-top: 0.5rem;
}

/* || FOOTER */
.footer {
  text-align: center;
}
.footer__p {
  color: var(--FONT-COLOR-ALT);
  margin: var(--MARGIN-TEXT);
  padding: var(--PADDING-TB-TEXT) var(--PADDING-SIDE-TEXT);
  font-weight: bold;
}

/* || MAIN */
.main {
  width: 100%;
}

.main__h2 {
  text-align: center;
  margin: var(--MARGIN-TEXT);
  margin-top: 0.5rem;
  font-weight: bold;
  font-size: 1.75em;
}

.main__img {
  width: 40%;
  min-width: 225px;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 20px;
  border: var(--BORDERS);
}

.main__p {
  color: var(--FONT-COLOR-ALT);
  padding: var(--PADDING-TB-TEXT) var(--PADDING-SIDE-TEXT);
  margin: var(--MARGIN-TEXT);
  background-color: var(--BGCOLOR-FADE2);
  box-shadow: var(--BOX-SHADOW);
  width: 75%;
  min-width: 225px;
  margin: auto;
}

hr {
  width: 75%;
  margin: auto;
  background-color: var(--BORDER-COLOR);
  border-color: var(--BORDER-COLOR);
  border-radius: 10px;
}

section {
  width: 90%;
  background-color: var(--BGCOLOR-SECTION);
  box-shadow: var(--BOX-SHADOW);
  padding: 1.5rem;
  margin: 1.5rem auto;
}

Expected Behavior

The expected behavior is that the code should pass the tests, but it did not. After removing the import in the CSS code and using an Arial font instead, the passed for Tests 16 and 17.

Screenshots

No screenshots are provided.

System

  • Device: Laptop
  • OS: Windows 11
  • Browser: Chrome
  • Version: Version 135.0.7049.115 (Official Build) (64-bit)

Troubleshooting Steps

  1. Check the font import: The first step is to check the font import in the CSS code. Make sure that the font is correctly imported from Google Fonts.
  2. Check the font family: Check the font family in the CSS code. Make sure that the font family is correctly set to the imported font.
  3. Check the font size: Check the font size in the CSS code. Make sure that the font size is correctly set to the imported font.
  4. Check the width of the hr and section elements: Check the width of the hr and section elements in the CSS code. Make sure that the width is set to a percentage value.
  5. Check the browser compatibility: Check the browser compatibility of the code. Make sure that the code is compatible with the browser being used.
  6. Check the CSS code: Check the CSS code for any errors or inconsistencies. Make sure that the CSS code is correctly written and formatted.
  7. Check the HTML code: Check the HTML code for any errors or inconsistencies. Make sure that the HTML code is correctly written and formatted.

Conclusion

The issue encountered on the Build an Event Flyer page on FreeCodeCamp is due to the import font from Google not being correctly imported or used in the CSS code. After removing the import in the CSS code and using an Arial font instead, the code passed for Tests 16 and 17. The troubleshooting steps provided can be used to identify and fix similar issues in the future.

Recommendations

  1. Use a consistent font family: Use a consistent font family throughout the code to avoid any issues with font imports.
  2. Check the font size: Check the font size in the CSS code to ensure that it is correctly set to the imported font.
  3. Check the width of the hr and section elements: Check the width of the hr and section elements in the CSS code to ensure that it is set to a percentage value.
  4. Check the browser compatibility: Check the browser compatibility of the code to ensure that it is compatible with the browser being used.
  5. Check the CSS code: Check the CSS code for any errors or inconsistencies to ensure that it is correctly written and formatted.
  6. Check the HTML code: Check the HTML code for any errors or inconsistencies to ensure that it is correctly written and formatted.
    Q&A: Import Fonts Error in Build an Event Flyer Page =====================================================

Q: What is the issue with importing fonts from Google Fonts?

A: The issue with importing fonts from Google Fonts is that the font import is not correctly imported or used in the CSS code. This can cause issues with the font family, font size, and width of the hr and section elements.

Q: How do I troubleshoot the issue with importing fonts from Google Fonts?

A: To troubleshoot the issue with importing fonts from Google Fonts, follow these steps:

  1. Check the font import: Check the font import in the CSS code to ensure that it is correctly imported from Google Fonts.
  2. Check the font family: Check the font family in the CSS code to ensure that it is correctly set to the imported font.
  3. Check the font size: Check the font size in the CSS code to ensure that it is correctly set to the imported font.
  4. Check the width of the hr and section elements: Check the width of the hr and section elements in the CSS code to ensure that it is set to a percentage value.
  5. Check the browser compatibility: Check the browser compatibility of the code to ensure that it is compatible with the browser being used.
  6. Check the CSS code: Check the CSS code for any errors or inconsistencies to ensure that it is correctly written and formatted.
  7. Check the HTML code: Check the HTML code for any errors or inconsistencies to ensure that it is correctly written and formatted.

Q: What are some common mistakes to avoid when importing fonts from Google Fonts?

A: Some common mistakes to avoid when importing fonts from Google Fonts include:

  1. Incorrect font import: Make sure that the font import is correctly imported from Google Fonts.
  2. Incorrect font family: Make sure that the font family is correctly set to the imported font.
  3. Incorrect font size: Make sure that the font size is correctly set to the imported font.
  4. Incorrect width of hr and section elements: Make sure that the width of the hr and section elements is set to a percentage value.
  5. Browser compatibility issues: Make sure that the code is compatible with the browser being used.

Q: How do I fix the issue with importing fonts from Google Fonts?

A: To fix the issue with importing fonts from Google Fonts, follow these steps:

  1. Remove the font import: Remove the font import from the CSS code.
  2. Use a different font: Use a different font that is not imported from Google Fonts.
  3. Check the CSS code: Check the CSS code for any errors or inconsistencies to ensure that it is correctly written and formatted.
  4. Check the HTML code: Check the HTML code for any errors or inconsistencies to ensure that it is correctly written and formatted.

Q: What are some best practices for importing fonts from Google Fonts?

A: Some best practices for importing fonts from Google Fonts include:

  1. Use a consistent font family: Use a consistent font family throughout the code to avoid any issues with font imports.
  2. Check the size: Check the font size in the CSS code to ensure that it is correctly set to the imported font.
  3. Check the width of the hr and section elements: Check the width of the hr and section elements in the CSS code to ensure that it is set to a percentage value.
  4. Check the browser compatibility: Check the browser compatibility of the code to ensure that it is compatible with the browser being used.
  5. Check the CSS code: Check the CSS code for any errors or inconsistencies to ensure that it is correctly written and formatted.
  6. Check the HTML code: Check the HTML code for any errors or inconsistencies to ensure that it is correctly written and formatted.

Q: Can I use a different font instead of Google Fonts?

A: Yes, you can use a different font instead of Google Fonts. You can use a font that is installed on your computer or a font that is hosted on a different server.

Q: How do I host my own font?

A: To host your own font, you can use a font hosting service such as Google Fonts or Font Squirrel. You can also host your own font on your own server.

Q: What are some popular font hosting services?

A: Some popular font hosting services include:

  1. Google Fonts: Google Fonts is a popular font hosting service that offers a wide range of fonts.
  2. Font Squirrel: Font Squirrel is a popular font hosting service that offers a wide range of fonts.
  3. Typekit: Typekit is a popular font hosting service that offers a wide range of fonts.
  4. Font Awesome: Font Awesome is a popular font hosting service that offers a wide range of fonts.

Q: How do I choose the right font for my project?

A: To choose the right font for your project, follow these steps:

  1. Consider the purpose of the font: Consider the purpose of the font and the audience that will be using it.
  2. Consider the style of the font: Consider the style of the font and whether it fits with the overall design of the project.
  3. Consider the readability of the font: Consider the readability of the font and whether it is easy to read.
  4. Consider the compatibility of the font: Consider the compatibility of the font and whether it is compatible with the browser being used.

Q: What are some common font styles?

A: Some common font styles include:

  1. Serif fonts: Serif fonts are fonts that have small lines or flourishes at the ends of the letters.
  2. Sans-serif fonts: Sans-serif fonts are fonts that do not have small lines or flourishes at the ends of the letters.
  3. Script fonts: Script fonts are fonts that are written in a flowing, cursive style.
  4. Display fonts: Display fonts are fonts that are designed to be used for display purposes, such as headings and titles.

Q: How do I use a font in my project?

A: To use a font in your project, follow these steps:

  1. Import the font: Import the font into your project using a font hosting service or by hosting the font on your own server.
  2. Set the font family: Set the font family in the CSS code to the imported font.
  3. Set the font size: Set the font size in the CSS code to the desired size.
  4. Check the CSS code: Check the CSS code for any errors or inconsistencies to ensure that it is correctly written and formatted.
  5. Check the HTML code: Check the HTML code for any errors or inconsistencies to ensure that it is correctly written and formatted.