I always have to dig around the internet, fail at every random user's explanation for hours, just to remember to come here to find what I need in 10-15 minutes 😕 Thanks again for all your work.
If font selection is crucial to the look of the site - and it so often is - then it's a must to have them downloadable. We could also try to get them in via a CDN link but that is a longer delay and a potential broken link sometime ahead. Good vid.
@6:58 How did your .woff file miraculously copy and paste itself into your assess/fonts folder ? ? ? I am assuming that you did not show this is the video because it is not important how it got there it is only important to know where in your project directory to paste it after downloading it. For example in React Apps most people put the .woff into src/fonts. Thanks I hope it works for me. And I find it very funny that the free trail is still available after a year of this video being online only because it says its free but you need to ---------------------->. give them your credit card info or No skills will be shared ! Somehow this does not work in my react app, I understand now why most developers just use the CDN even tough it would make the App require more internet requests to load!
Great tutorial! Thank you so much Kevin! I’m creating my own website (with very limited skills) and found this tutorial very easy to follow. The hardest part was to pick a font… there are so many to choose from! 😊
Again wow Kevin, thank you so much. So awesome! Chris Coyier is the one who inspired to do frontend development. Now you, 10 years later bring back the joy of the job I had back then. So Awewome!!
Hi Kevin, because of your tutorial I also realize that you can covert fonts through font squirrel if they don't have a font you are looking for and it works. Thanks.
this was really helpful! ive known about the font-family method before but seeing it explained with great examples and in a wider context made it really easy to understand
Hi Kevin, At what point do browsers download these self-hosted fonts -- upon reading the @font-face rule, or when they are encountered on the first font-family later on? What happens when these fonts are declared under @font-face, but never used? Thank you in advance.
Mr. Kevin I highly recommend installing ad blocker chrome extention to block annoying adverts. Even two. F.e. Ad Block Plus, Ad Blocker It'll make your browsing much more comfortable!
I'd rather not. As a content creator a lot of my income comes from ads here on UA-cam. Ads sucks, but they are why the content can be free and not behind a paywall.
When the files are on the server , on the hosting , not local files on your computer, A note on doing the file naming , naming the files for the fonts , - i dont think you should have spaces between the words, maybe , not sure . And put the files in a nice folder do what the tutorial is doing. Thank you , I used .woff file using alegreya sans .
@Kevin, as always great content! Thank you! Question: what happens (after we define the font-faces as you discussed in the video) and on an element (say ) we define a css properties: font-family and font-weight. font-family: "mathlete"; font-weight: 500; Now font-weight:500 isn't one of "normal" or "bold". Which one the browser would choose?
It would be useful if Google Chrome and /or other browsers would collect statistics about what fonts are used by the most visited sites and use that local() css function and give suggestions to install those fonts locally yourself. I'm saying this because I didn't see such thing on any browser yet.
Do I need to put all variants from the same font on font face or one? If yes what difference does it make if I can change the font-weight and font-style.
Hey, thanks for the video! I successfully used a local font in Sass. I created a partial (aka Sass file with an "_" at the beginning) called "_localFonts.scss" to put the @font-face code. I also made sure to mention that file in two places. First, the _index.scss folder where all the @forwards live (the _index.scss allows the other partials to use all the variables of other partials). Second, in my main.scss with @use '_localFonts.scss'; so that the file would be included in the final output.
Thanks for another great video Kevin! I'll definitely being using this technique in my Udemy class projects and personal projects moving forward :) Quick question...do you tend to keep these fonts in a general folder on your computer for ease of future use or just pull from font squirrel and place in your asset folder (project specific) when needed?
Hi Kevin, can you create a video explaining how to use svg spritesheet and then retrieve icons from spritesheet with url paths defined dynamically..thanks a lot for all the thoughtful contents you have created.
Thank you very much for your video! It was very useful :) I just have one question, I added the font Blackout Sunrise to my website and for some reason it looks a little different than the way it originally was (and also in Figma) Is there some way to fix that? Thank you in advance!
Hi Kevin, I'm using Google Fonts on my React project, I'm hosting them myself using font-face like you showed here, is this a good practice or should I just import them using the link on Google Fonts website?
Then icon should also self host or export form fontawesome . What to do ? And sometimes when i try to import some icon its shows square and when i use it on css in psuedo element it shows .
As thorough as Kevin is with his explanation, I can't get this to work in Tailwind. Probably because I have to call a separate utility class to invoke the font weight like... font-futura and then font-bold, which then bolds the font but removes the font family for some reason. Even using font-[700] doesn't work.
For anyone else who may be trying to setup multiple font variants for use with Tailwind, I got it to work by using numeric values; like 300 and 700 for lighter and bold, respectively, instead of using 'lighter' and 'bold' within @font-face and then using font-[***numeric_value**] within my tailwind inline css.
Hi Kevin, Thank you for the video..very helpful..but I want to ask you, I downloaded then uploaded many font variables from the font squirrel site and they all worked on the website, but I'm not being able to control their axes using the font-variation-settings..nothing is being changed and it seems that it's not working. Any help would really be appreciated! :)
The keyword value normal maps to the numeric value 400 and the value bold maps to 700. In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights. If a font has a bold (“700”) or normal (“400”) version as part of the font family, the browser will use that. If those are not available, the browser will mimic its own bold or normal version of the font. It will not mimic the other unavailable weights. Fonts often use names like “Regular” and “Light” to identify any alternate font weights.
That’s hyperbole. This creator doesn’t do more marketing than teaching. There’s one 60sec ad in a 14m video. It literally takes 3 taps to fast fwd through it and ads are how this content is able to be free for us, or if we are getting specific, it’s the price of 3 taps. Content creators should be paid for their time and effort too and is viewership are getting the best deal out of the equation. So much work goes into creating videos like these. I guess you’d rather pay $3.99 a video for a version sans 60sec ad?
Disappointing that it doesn't appear to support woff2 as well as woff. The file format for both is exactly the same, the only difference is woff2 has a better compression algorithm.
About accents and umlauts. Just think. IF you look for fonts that support cyrillic alphabet in google fonts, only 10% of them have such support. Litteralyl 10 handwritten fonts. for entire internet in cyrillic. Not good. Meanwhile, umlauts and stuff, you can always write "AE OE UE" or ss and you're done. Websites not having cyrillic version is realyl a problem. So, if you are making international website with many langugaes, look if it has support of at least cyrillic.
You can still use Google fonts. I'll be looking at how to set them up this way as well in a video next week. You can do it, but it might not be best for performance (check the link in the description of my video). Local looks for fonts on that users computer. url looks for ones that are online (such as where you are hosting them)
@@ajinkyachitale89 @import into the CSS is the worst. After that, probably self hosting, but it depends on your host. Check the link in the description though, shows that self hosting can be much better
I thought I knew all of this and wasn't gonna bother to watch it but that local font tip at the end is super helpful.
just used a free font with ttf in scrimba web dev challenge, I was in unaware of 'woff'.
learned a lot today.
Ahh - this was my suggestion!
. . . and yes this was helpful, as there are bits of this that will improve the way I do things.
Even i knew the topic you are speaking about and i use it daily, i always discover something new in your videos. Thx for sharing!
Thanks for this video, Kevin. I raised my knowledge of implementing local fonts.
I always have to dig around the internet, fail at every random user's explanation for hours, just to remember to come here to find what I need in 10-15 minutes 😕
Thanks again for all your work.
If font selection is crucial to the look of the site - and it so often is - then it's a must to have them downloadable.
We could also try to get them in via a CDN link but that is a longer delay and a potential broken link sometime ahead.
Good vid.
@6:58 How did your .woff file miraculously copy and paste itself into your assess/fonts folder ? ? ? I am assuming that you did not show this is the video because it is not important how it got there it is only important to know where in your project directory to paste it after downloading it. For example in React Apps most people put the .woff into src/fonts. Thanks I hope it works for me. And I find it very funny that the free trail is still available after a year of this video being online only because it says its free but you need to ---------------------->. give them your credit card info or No skills will be shared ! Somehow this does not work in my react app, I understand now why most developers just use the CDN even tough it would make the App require more internet requests to load!
Great tutorial! Thank you so much Kevin! I’m creating my own website (with very limited skills) and found this tutorial very easy to follow. The hardest part was to pick a font… there are so many to choose from! 😊
Again wow Kevin, thank you so much. So awesome! Chris Coyier is the one who inspired to do frontend development. Now you, 10 years later bring back the joy of the job I had back then. So Awewome!!
This was very helpful, thanks a lot Kevin!
thats exactly what i was looking for. one font family and then font-weight and font-style combination. Thanks!
Hi Kevin, because of your tutorial I also realize that you can covert fonts through font squirrel if they don't have a font you are looking for and it works. Thanks.
this was really helpful! ive known about the font-family method before but seeing it explained with great examples and in a wider context made it really easy to understand
This video is great! Thank you for talking about file formats, where to get them, how to use them and browser support. Thank you!
Thank you!!! In all my classes in front-end development, no one has ever gone into depth on how to use @font-face for custom fonts.
This is a very important video!
thankyou for this video
Thanks Kevin, this worked totally, plus I now understand how font works
This video saved my web page's life
Thanks, some great information!
Thank you for the detail. I was looking for somthing like this.
Thanks Kelvin. this was helpful
Thanks. Hosting your font locally is also better for the user's privacy.
well, that was the thing what i have looking for! many thanks
Hi Kevin,
At what point do browsers download these self-hosted fonts -- upon reading the @font-face rule, or when they are encountered on the first font-family later on? What happens when these fonts are declared under @font-face, but never used?
Thank you in advance.
Mr. Kevin I highly recommend installing ad blocker chrome extention to block annoying adverts. Even two.
F.e. Ad Block Plus, Ad Blocker
It'll make your browsing much more comfortable!
I'd rather not. As a content creator a lot of my income comes from ads here on UA-cam. Ads sucks, but they are why the content can be free and not behind a paywall.
@@KevinPowell now i see
Thank you, this solved a huge problem I had.
thank you so much sir
I always learn a lot from your videos! Thank you so much :)
Awesome explanation, super clear!. Helped me a lot to understand how to implement local fonts on my project.
Liked and subscribed.
When the files are on the server , on the hosting , not local files on your computer,
A note on doing the file naming , naming the files for the fonts , - i dont think you should have spaces between the words, maybe , not sure . And put the files in a nice folder do what the tutorial is doing.
Thank you , I used .woff file using alegreya sans .
Looking forward for more tips
Implemented and working! Thanks!
Great video, but what about preload in html for lighthouse mobile optimization? Please show how use it in html
perfect, thank you
Ha i swear I was struggling with this one recently too! Thought I knew everything but nope, lol once again u show up on time! Thank you 😊!! #cssguru
Thank you.
@Kevin, as always great content! Thank you!
Question: what happens (after we define the font-faces as you discussed in the video) and on an element (say ) we define a css properties: font-family and font-weight.
font-family: "mathlete";
font-weight: 500;
Now font-weight:500 isn't one of "normal" or "bold". Which one the browser would choose?
Thansk for this video.
Perfectly clear. Thank you.
this video showed me what i was doing wrong. I didnt source my woff file correctly which was causing it to not work. Thank you
Thank you
Very helpful! Thanks a lot 👍
Awesome!
It would be useful if Google Chrome and /or other browsers would collect statistics about what fonts are used by the most visited sites and use that local() css function and give suggestions to install those fonts locally yourself. I'm saying this because I didn't see such thing on any browser yet.
Thanks sir
Useful, thanks!
Do I need to put all variants from the same font on font face or one? If yes what difference does it make if I can change the font-weight and font-style.
Hey, thanks for the video! I successfully used a local font in Sass. I created a partial (aka Sass file with an "_" at the beginning) called "_localFonts.scss" to put the @font-face code. I also made sure to mention that file in two places. First, the _index.scss folder where all the @forwards live (the _index.scss allows the other partials to use all the variables of other partials). Second, in my main.scss with @use '_localFonts.scss'; so that the file would be included in the final output.
thanks
How can you use a website crowded by all those ads? Is it how you browse normally? I find them distracting even to follow what you are talking about 😕
Thanks for another great video Kevin! I'll definitely being using this technique in my Udemy class projects and personal projects moving forward :) Quick question...do you tend to keep these fonts in a general folder on your computer for ease of future use or just pull from font squirrel and place in your asset folder (project specific) when needed?
Ótimo vídeo parabéns ✌.
keeviiinnnnnnn!!!!!
Why is this better than the preconnect link method?
Like the glasses, hope you are well
Hi Kevin, can you create a video explaining how to use svg spritesheet and then retrieve icons from spritesheet with url paths defined dynamically..thanks a lot for all the thoughtful contents you have created.
I am Unable to see the imported font in the font-family as like other fonts, can you please help me with this.
is the at font-face class meant for self-hosting? I ask because when I copy google fonts they don't share an at font-face class.
Really ❤️
Thank you very much for your video! It was very useful :) I just have one question, I added the font Blackout Sunrise to my website and for some reason it looks a little different than the way it originally was (and also in Figma) Is there some way to fix that? Thank you in advance!
One other grate class, any chance to see something about font-display?
Hey Kevin, your timeline tags has a typo: Introduction is spelled incorrectly. Just wanted to let you know. But thanks for the great tips!
What if If my Woff fonts didn't come with a stylesheet with the url in like yours? How will I get the hosting address?
So linking to a .TTF src instead of a .WOFF wouldn’t work?
Hi Kevin, I'm using Google Fonts on my React project, I'm hosting them myself using font-face like you showed here, is this a good practice or should I just import them using the link on Google Fonts website?
There is a spelling error at the first timestamp "introdcution"
Hello Kevin, is there any way to look at any website and then understand if the font used is properly licensed?
Can you use this for FONT BOOKS in MacOS?
is there a wap format?
How you can handle the same thinks but in scss ? I have found some problems with the relative path, there is a way to bypass this ?
Then icon should also self host or export form fontawesome . What to do ? And sometimes when i try to import some icon its shows square and when i use it on css in psuedo element it shows .
how do i upload my own custom font to use it with link online like Google fonts
As thorough as Kevin is with his explanation, I can't get this to work in Tailwind. Probably because I have to call a separate utility class to invoke the font weight like... font-futura and then font-bold, which then bolds the font but removes the font family for some reason. Even using font-[700] doesn't work.
For anyone else who may be trying to setup multiple font variants for use with Tailwind, I got it to work by using numeric values; like 300 and 700 for lighter and bold, respectively, instead of using 'lighter' and 'bold' within @font-face and then using font-[***numeric_value**] within my tailwind inline css.
Is it the same way for node js or i can install the font/google-fonts as a node module ?
My font works on desktop browser but on mobile it does not work.
Can you show us some css for your take on the frost glass trend.
It's in my list, though it'll be a little bit before I get to it. I have a bit of a backlog.
Hi Kevin, Thank you for the video..very helpful..but I want to ask you, I downloaded then uploaded many font variables from the font squirrel site and they all worked on the website, but I'm not being able to control their axes using the font-variation-settings..nothing is being changed and it seems that it's not working. Any help would really be appreciated! :)
There aren't any woff files in my download
Спасибо
Does someone know how the browser is evaluating bold / normal font-weight from the numeric values?
The keyword value normal maps to the numeric value 400 and the value bold maps to 700.
In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights.
If a font has a bold (“700”) or normal (“400”) version as part of the font family, the browser will use that. If those are not available, the browser will mimic its own bold or normal version of the font. It will not mimic the other unavailable weights. Fonts often use names like “Regular” and “Light” to identify any alternate font weights.
I paid to avoid ads on UA-cam. You do more marketing than teaching. Google should have an agreement for this,
That’s hyperbole. This creator doesn’t do more marketing than teaching.
There’s one 60sec ad in a 14m video. It literally takes 3 taps to fast fwd through it and ads are how this content is able to be free for us, or if we are getting specific, it’s the price of 3 taps.
Content creators should be paid for their time and effort too and is viewership are getting the best deal out of the equation. So much work goes into creating videos like these. I guess you’d rather pay $3.99 a video for a version sans 60sec ad?
Disappointing that it doesn't appear to support woff2 as well as woff. The file format for both is exactly the same, the only difference is woff2 has a better compression algorithm.
hi kevin, can i get san francisco font here?
Most of the time I suffer because fonts lacks spanish accents and special characters: Editing the font is the only option?
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell01211
Do I follow the same for Roboto?
This will not work for me and I can't for the life of me figure out why
Why not woff2?
Why don't you take about woff2 ?
About accents and umlauts. Just think. IF you look for fonts that support cyrillic alphabet in google fonts, only 10% of them have such support. Litteralyl 10 handwritten fonts. for entire internet in cyrillic. Not good. Meanwhile, umlauts and stuff, you can always write "AE OE UE" or ss and you're done. Websites not having cyrillic version is realyl a problem. So, if you are making international website with many langugaes, look if it has support of at least cyrillic.
Didnt work
Couldn't you just self host downloaded google fonts instead of download font squirrel fonts?
Cannot I use free google font ?
and what's the difference between local font and online import font ?
You can still use Google fonts. I'll be looking at how to set them up this way as well in a video next week. You can do it, but it might not be best for performance (check the link in the description of my video).
Local looks for fonts on that users computer. url looks for ones that are online (such as where you are hosting them)
@@KevinPowell ok ty u so much
which way is better as per performance using font-face after download or direct import online... please suggest
@@ajinkyachitale89 @import into the CSS is the worst. After that, probably self hosting, but it depends on your host. Check the link in the description though, shows that self hosting can be much better
why does it say fortnite in the bottom 9:13
Hah, it's from some other window open, guess I didn't notice when recording, lol
yayy
Merci !
First!
third