@font-face question

Get Help CSS
,
#1

Is this example acceptable

@font-face {
  font-family: 'Merriweather';
  font-style: normal, italic;
  font-weight: 400, 500, 800;
}

The video walkthrough on the project does this instead of creating separate ones.

Sorry, my first thread and idk how I should link the part I’m on. I understand @font-face, I’m just thrown off a little cos nothing so far has said you can do this and I’m struggling to find anything else about it. Thanks

#2

I looked at the documentation here: @font-face - CSS: Cascading Style Sheets | MDN

I’m confused as to why font-weight has 3 values and not just 2. Also confuses me why this descriptor doesn’t have

src: url(" ") format(" ");

somewhere to link to the particular font.

I haven’t watched the video but I would stick with official documentation!

#3

I’m literally only confused by having more than one value. Throughout the course I’m doing, it’s not said anything about being able to have more than one value (In fact, the course I’m doing is great for that. Asking me to complete challenges I haven’t covered the topics to yet.)
It works, and I get how it works, and why…

Prior to the video however, I thought you had to have a @font-face for each font and it’s respective weight/style.
Example:

EXAMPLE 1
@font-face {
  font-family: 'example';
  font-style: normal, italic;
  font-weight: 400, 500;
}

Should be (according to the video) the same as:

EXAMPLE 2
@font-face {
  font-family: 'example';
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'example';
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'example';
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: 'example';
  font-style: italic;
  font-weight: 500;
}

I was wondering if ‘EXAMPLE 1’ was correct, because it’s way more efficient than having to write it out like in ‘EXAMPLE 2’

#4

Yup! I would really like to have an answer to that too! As confused as you! :sweat_smile:

#5

Yeah, EXAMPLE 1 works just fine. Think of it like shorthand. Saves you repeating yourself, keeping it all nice and dry.

#6

Can you give me an example for when you direct the user to multiple, local font-weights for your project? Like, if you want to put an ExtraLight font (weight 100) and a bold font (weight 700), when you put src: url(./fonts/whateverfontextralight.ttf) format(‘truetype’), can you just chain the src as well to src: url(./fonts/whateverfontextralight.ttf), url(./fonts/whateverfontbold.ttf) format(‘truetype’) ???

#7 
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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;
}

I haven’t been learning since my free trial ran out, but I’m pretty sure you can. Just take a font, and add the different values. See below.

@font-face {
  font-family: 'Roboto';
  font-style: normal, italic;
  font-weight: 100, 400, 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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;
}

I think the src is grabbing Roboto normal 400, and the font-style and font-weight property adds the different values you want.

I hope that helps, and I hope it answers your question.
I know I tested a few things out on this little project I was working on to better understand what I was learning, and I’m pretty sure that’s how I did it.
acollins96.github.io (was messing about with media queries at the time. I don’t like the mobile display but it works.

1 Like
#8

Thank you! @mtf can you confirm this, and maybe explain more on the Unicode part?

#9

The Unicode is gonna be the same across all Roboto fonts.

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn’t use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.

reference

I’m assuming, as long as you copy and paste the @font-face correctly, you’ll be fine. And adding different values works for me, whether or not you’re supposed to do that is another question. I don’t see why you shouldn’t. And as far as I know, you can’t add different fonts to the same @font-face.
Best way to learn yourself is by putting it in practice. Just try it out. Good luck