Kevin Powell - Community•15mo ago

Font-Face

Hey everyone I'm new here and learning front end development. Can anyone help me out with this question. If i have a webpage that has two different type of font for example Robotto and Montserrat and I'm using @font-face to bring those fonts into my work space locally. Do I need two create two separate @font-face property or do I put that all under the same property?

5 Replies

vince•15mo ago

I believe they would have to be 2 separate definitions. This is how I have it configured on my current site:

@font-face {
  font-family: "Yeseva One";
  src: url("/fonts/YesevaOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yeseva One";
  src: url("/fonts/YesevaOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

dellannieOP•15mo ago

@vince Thank you thats whay I had in mind. I appreciate it

vince•15mo ago

Yup! There could be a better approach; I'm not that experienced so maybe there's a better way

dellannieOP•15mo ago

I've looked up a few and so far I'm seeing two seperate approach if I find something i will post it here as well @vince

vince•15mo ago

Thanks 🙂

Gaming

Programming

Font-Face