Font Face / Hosting Own Fonts
When using font face to host your own fonts, do you need to add it in for all the font weights you use for that font or?
6 Replies
Would this work fine?
@font-face {
font-family: "Poppins";
font-weight: 300, 400, 500, 600, 700;
src: url("/assets/fonts/poppins/woff2/") format("woff2");
src: url("/assets/fonts/poppins/woff/") format("woff2");
}
@font-face {
font-family: "Roboto";
font-weight: 300, 400, 500, 600, 700;
src: url("/assets/fonts/roboto/woff2/") format("woff2");
src: url("/assets/fonts/roboto/woff/") format("woff2");
}
Here is how i saw it on Kevins video
@font-face {
font-family: "Roboto";
font-weight: 400;
src: url("/assets/fonts/roboto/woff2/roboto-regular-webfont.woff2")
format("woff2");
src: url("/assets/fonts/roboto/woff/roboto-regular-webfont.woff")
format("woff2");
}
But with this, it is 400 regular, also the url links to the specific 400 font file
If i specify multiple font sizes "font-weight: 300, 400, 500, 600, 700;" like this and not include the specific file in url but link it to the folder like this "/assets/fonts/roboto/woff2/" would it work?
If I remember correctly I think you declare the weights as a range with variable fonts :
font-weight: 100_1000@font-face {
font-family: "Poppins";
font-weight: 300, 400, 500, 600, 700;
src: url("/assets/fonts/poppins/woff2/poppins-light-webfont.woff2")
format("woff2") 300;
src: url("/assets/fonts/poppins/woff2/poppins-regular-webfont.woff2")
format("woff2") 400;
src: url("/assets/fonts/poppins/woff2/poppins-medium-webfont.woff2")
format("woff2") 500;
src: url("/assets/fonts/poppins/woff2/poppins-semibold-webfont.woff2")
format("woff2") 600;
src: url("/assets/fonts/poppins/woff2/poppins-bold-webfont.woff2")
format("woff2") 700;
}
@font-face {
font-family: "Poppins";
font-weight: 300, 400, 500, 600, 700;
src: url("/assets/fonts/poppins/woff/poppins-light-webfont.woff")
format("woff") 300;
src: url("/assets/fonts/poppins/woff/poppins-regular-webfont.woff")
format("woff") 400;
src: url("/assets/fonts/poppins/woff/poppins-medium-webfont.woff")
format("woff") 500;
src: url("/assets/fonts/poppins/woff/poppins-semibold-webfont.woff")
format("woff") 600;
src: url("/assets/fonts/poppins/woff/poppins-bold-webfont.woff")
format("woff") 700;
}
@font-face {
font-family: "Roboto";
font-weight: 300, 400, 500, 700;
src: url("/assets/fonts/roboto/woff2/roboto-light-webfont.woff2")
format("woff2") 300;
src: url("/assets/fonts/roboto/woff2/roboto-regular-webfont.woff2")
format("woff2") 400;
src: url("/assets/fonts/roboto/woff2/roboto-medium-webfont.woff2")
format("woff2") 500;
src: url("/assets/fonts/roboto/woff2/roboto-bold-webfont.woff2")
format("woff2") 700;
}
@font-face {
font-family: "Roboto";
font-weight: 300, 400, 500, 700;
src: url("/assets/fonts/roboto/woff/roboto-light-webfont.woff")
format("woff") 300;
src: url("/assets/fonts/roboto/woff/roboto-regular-webfont.woff")
format("woff") 400;
src: url("/assets/fonts/roboto/woff/roboto-medium-webfont.woff")
format("woff") 500;
src: url("/assets/fonts/roboto/woff/roboto-bold-webfont.woff")
format("woff") 700;
}
This is what chatgpt says @clevermissfox lol
chatgpt is a terrible teacher
yeah i think so too, whats your opinion for best practices on the above?
The first syntax you pasted for font family: you don’t need two src properties and if you using variable fonts , font-weight : 300 700 is sufficient. This covers all ranges