How to host your own fonts made simple

Hosting your own fonts is a good way to improve the performance of your site, and in this video we look at how to do it with @font-face including where you can find fonts from, and how to set them up to make your life as simple as possible.

/// Chapters
00:00 - Introdcution
00:59 - Font Squirrel
06:10 - Setting up @font-face
11:41 - Setting up local sources

This video is sponsored by Skillshare. A big thank you to them for their support of my channel!

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[JamesCoyle]

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.

[sylvie]

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! 😊

[afternoonsunjeans]

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

[daveskye]

Ahh - this was my suggestion!
. . . and yes this was helpful, as there are bits of this that will improve the way I do things.

[abdelmonemnaceur]

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!

[adrian]

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.

[georgesaitdev]

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!!

[kuntaldas]

just used a free font with ttf in scrimba web dev challenge, I was in unaware of 'woff'.

learned a lot today.

[EzequielGarraffo]

Awesome explanation, super clear!. Helped me a lot to understand how to implement local fonts on my project.

Liked and subscribed.

[AnthonyCandaele]

Thanks for this video, Kevin. I raised my knowledge of implementing local fonts.

[debbiemurdock]

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.

[khaldounal-nuaimi]

I always learn a lot from your videos! Thank you so much :)

[andriibibik]

thats exactly what i was looking for. one font family and then font-weight and font-style combination. Thanks!

[codestylez]

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.

[_zampano]

This was very helpful, thanks a lot Kevin!

[thecoderabbi]

Thanks Kevin, this worked totally, plus I now understand how font works

[mangouni]

This video is great! Thank you for talking about file formats, where to get them, how to use them and browser support. Thank you!

[shahadathossain]

Thank you for the detail. I was looking for somthing like this.

well, that was the thing what i have looking for! many thanks

[muhammadzaakirmungrue]

@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!