How to host your own fonts made simple

Рет қаралды 89,365

Күн бұрын

The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell01211
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.
Font Squirrel: www.fontsquirrel.com/
Say Goodbye to Google Fonts: wicki.io/posts/2020-11-goodby...
My video on picking fonts: • Make your sites look b...
/// 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
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 113

@JamesCoyle95 3 жыл бұрын

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.

@sylvie7064 2 жыл бұрын

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

@afternoonsunjeans9180 2 жыл бұрын

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

@abdelmonemnaceur7776 3 жыл бұрын

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!

@adrian20065 3 жыл бұрын

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

@daveskye 3 жыл бұрын

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

@AnthonyCandaele 24 күн бұрын

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

@_zampano Ай бұрын

This was very helpful, thanks a lot Kevin!

@kuntaldas2843 3 жыл бұрын

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

@codestylez4290 2 жыл бұрын

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.

@andriibibik39 Жыл бұрын

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

@debbiemurdock5544 3 жыл бұрын

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.

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

@khaldounal-nuaimi3594 2 жыл бұрын

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

@EzequielGarraffo 2 жыл бұрын

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

@thecoderabbi 2 жыл бұрын

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

@shahadathossain1209 2 жыл бұрын

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

@carbellsarfo 9 ай бұрын

Thanks Kelvin. this was helpful

3 жыл бұрын

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

@AndrevwZA 3 жыл бұрын

Perfectly clear. Thank you.

@EvanEdrok 3 ай бұрын

Thanks, some great information!

@harmonicresonanceproject 2 жыл бұрын

Implemented and working! Thanks!

@IkraamDev 3 жыл бұрын

This is a very important video!

@muhammadzaakirmungrue3146 2 жыл бұрын

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

@Aabara_ka_dabara Жыл бұрын

thankyou for this video

@danielahermosillo8991 2 жыл бұрын

Useful, thanks!

@vinitabhardwaj5822 3 жыл бұрын

Looking forward for more tips

@Rob-cq1nf 3 жыл бұрын

Very helpful! Thanks a lot 👍

@bkr_vids 2 жыл бұрын

Thank you, this solved a huge problem I had.

@salmamorales1217 2 жыл бұрын

This video saved my web page's life

@freedomman6 2 жыл бұрын

perfect, thank you

@benzflynn Ай бұрын

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.

@HostDotPromo 3 жыл бұрын

Thanks. Hosting your font locally is also better for the user's privacy.

@randomlee101 2 жыл бұрын

Thank you.

@generationwolves 3 жыл бұрын

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.

@janelleschuh8424 3 жыл бұрын

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?

@omerakkoca8263 2 жыл бұрын

Thansk for this video.

@rozimuhamadmuminjanov259 2 жыл бұрын

Thank you

@luiskmorales1850 2 жыл бұрын

Awesome!

@romuloalves9349 3 жыл бұрын

Ótimo vídeo parabéns ✌.

@nickygello9105 3 жыл бұрын

Thanks sir

@cerealrakist7360 3 жыл бұрын

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

@prasadpulaguntla9255 Жыл бұрын

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

@icebreakerkiddotvru1913 2 жыл бұрын

thanks

@cvijaymohan 3 жыл бұрын

Hello Kevin, is there any way to look at any website and then understand if the font used is properly licensed?

@samarharbieh4813 3 жыл бұрын

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

@laurarabasco4637 2 жыл бұрын

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!

@clintondavis3352 3 жыл бұрын

Like the glasses, hope you are well

@airixxxx 3 жыл бұрын

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?

@Beraksekebon21 3 жыл бұрын

keeviiinnnnnnn!!!!!

@dailymeow3283 3 жыл бұрын

Is it the same way for node js or i can install the font/google-fonts as a node module ?

@animefanboy842 3 жыл бұрын

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 .

@lorenzotomasi554 3 жыл бұрын

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 ?

@user-bm8ft1iv5t 3 жыл бұрын

Great video, but what about preload in html for lighthouse mobile optimization? Please show how use it in html

@nahidmodan4824 Жыл бұрын

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.

@chandjenac6872 3 жыл бұрын

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.

@hugocsl 3 жыл бұрын

One other grate class, any chance to see something about font-display?

@BMikel 3 жыл бұрын

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!

@KevinPowell 3 жыл бұрын

I'd rather not. As a content creator a lot of my income comes from ads here on KZfaq. Ads sucks, but they are why the content can be free and not behind a paywall.

@BMikel 3 жыл бұрын

@@KevinPowell now i see

@ravikiran7853 Жыл бұрын

I am Unable to see the imported font in the font-family as like other fonts, can you please help me with this.

@niteshkrsah2222 3 жыл бұрын

Really ❤️

@codervince4957 2 жыл бұрын

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

@MrMulaflaga Жыл бұрын

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?

@XeiDaMoKaFE 2 жыл бұрын

how do i upload my own custom font to use it with link online like Google fonts

@justsaybobby 2 жыл бұрын

Can you use this for FONT BOOKS in MacOS?

@user-ym7gg5ki6l 3 жыл бұрын

Спасибо

@georgekrax 3 жыл бұрын

Do I follow the same for Roboto?

@Victor_Marius 3 жыл бұрын

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.

@ubermenschhoodrat7288 2 жыл бұрын

So linking to a .TTF src instead of a .WOFF wouldn’t work?

@chillbro2275 15 күн бұрын

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.

@dougc84 3 жыл бұрын

Hey Kevin, your timeline tags has a typo: Introduction is spelled incorrectly. Just wanted to let you know. But thanks for the great tips!

@blokche_dev 3 жыл бұрын

Does someone know how the browser is evaluating bold / normal font-weight from the numeric values?

@sirisiri2416 3 жыл бұрын

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.

@jhonathanmartini9829 2 жыл бұрын

is there a wap format?

@sinucletus1214 Жыл бұрын

Why is this better than the preconnect link method?

@karannasoulvongs1754 Жыл бұрын

hi kevin, can i get san francisco font here?

@petropzqi 3 жыл бұрын

Can you show us some css for your take on the frost glass trend.

@KevinPowell 3 жыл бұрын

It's in my list, though it'll be a little bit before I get to it. I have a bit of a backlog.

@AndreaGrandi 4 ай бұрын

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 😕

@Hugos68 2 жыл бұрын

There is a spelling error at the first timestamp "introdcution"

3 жыл бұрын

Most of the time I suffer because fonts lacks spanish accents and special characters: Editing the font is the only option?

@alexthewebdesigner1856 11 ай бұрын

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.

@alexthewebdesigner1856 11 ай бұрын

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.

@joja4323 Жыл бұрын

My font works on desktop browser but on mobile it does not work.

@AndrewMarsin 3 жыл бұрын

Why not woff2?

@codingismyreligion Жыл бұрын

There aren't any woff files in my download

@IAmLesleh 3 жыл бұрын

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.

@animefanboy842 3 жыл бұрын

Cannot I use free google font ? and what's the difference between local font and online import font ?

@KevinPowell 3 жыл бұрын

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)

@animefanboy842 3 жыл бұрын

@@KevinPowell ok ty u so much

@ajinkyachitale89 3 жыл бұрын

which way is better as per performance using font-face after download or direct import online... please suggest

@KevinPowell 3 жыл бұрын

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

@andrew.schaeffer4032 Жыл бұрын

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.

@carlosdiazplaza1690 3 жыл бұрын

yayy

@mathiaspeguet5221 Жыл бұрын

Why don't you take about woff2 ?

@noir371 2 жыл бұрын

This will not work for me and I can't for the life of me figure out why

@migueldomingos4570 3 жыл бұрын

Couldn't you just self host downloaded google fonts instead of download font squirrel fonts?

@muha0644 3 жыл бұрын

why does it say fortnite in the bottom 9:13

@KevinPowell 3 жыл бұрын

Hah, it's from some other window open, guess I didn't notice when recording, lol

@Akhen. Жыл бұрын

Didnt work

@privymassage3458 Жыл бұрын

I paid to avoid ads on KZfaq. You do more marketing than teaching. Google should have an agreement for this,

@clevermissfox 3 ай бұрын

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?

@somnvm37 3 жыл бұрын

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.