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
vince•16mo 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;
}
dellannie
dellannieOP•16mo ago
@vince Thank you thats whay I had in mind. I appreciate it
vince
vince•16mo ago
Yup! There could be a better approach; I'm not that experienced so maybe there's a better way
dellannie
dellannieOP•16mo 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
vince•16mo ago
Thanks 🙂
Want results from more Discord servers?
Add your server