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
M Rashaad Hartley
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?
clevermissfox
clevermissfox8mo ago
If I remember correctly I think you declare the weights as a range with variable fonts : font-weight: 100_1000
M Rashaad Hartley
@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
Jochem
Jochem8mo ago
chatgpt is a terrible teacher
M Rashaad Hartley
yeah i think so too, whats your opinion for best practices on the above?
Abdul Rehaman Shaikh
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
Want results from more Discord servers?
Add your server