Html Question posted in
Some basic documentation can be found here.

Html – font-family not being applied when I use a css variable

I am trying to set the font family for my page with a css variable. Here is the piece of code:

/* font-family: 'Poppins' sans-serif; */
/* - Very Dark Blue: hsl(234, 12%, 34%)
- Grayish Blue: hsl(229, 6%, 66%)
- Very Light Gray: hsl(0, 0%, 98%) */

:root {
  --ff-sans: "Poppins" sans-serif;

  --fw-light: 200;
  --fw-regular: 400;
  --fw-bold: 600;

  --fs-400: 0.9275rem;
  --fs-500: 1.25rem;
  --fs-600: 1.625rem;
  --fs-900: 2.5rem;

  --clr-neutral-900: hsl(234, 12%, 34%);
  --clr-neutral-400: hsl(229, 6%, 66%);
  --clr-neutral-100: hsl(0, 0%, 98%);

  --clr-teal: hsl(180, 58%, 56%);
  --clr-red: hsl(0, 70%, 60%);
  --clr-blue: hsl(212, 86%, 64%);
  --clr-yellow: hsl(34, 97%, 64%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  color: var(--clr-neutral-400);
}

body {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.1;
  color: var(--clr-neutral-900);
}

The font-family is not being changed, I even checked the network tab to see if the font is being downloaded and it is. If I try to set it to a specific element, it works. How can I solve this?

Tags:

2

Answers


  1. 0

    it’s probably because of a syntax error in /* font-family: 'Poppins' sans-serif; */. You have to separate backup fonts with commas, like this:

    :root { --ff-sans: 'Poppins', sans-serif }
    Login or Signup to reply.
  2. 0

    In your code, you have called the font family in the wrong way. Change and use the below code for the font family and see your output.

    :root {
    --ff-sans: "Poppins", sans-serif;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search