How to host your own fonts made simple

[@JamesCoyle95]

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.

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

[@abdelmonemnaceur7776]

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!

[@codestylez4290]

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.

[@kuntaldas2843]

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

[@harmonicresonanceproject]

Implemented and working! Thanks!

[@_zampano]

This was very helpful, thanks a lot Kevin!

[@AnthonyCandaele]

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

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

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

[@muhammadzaakirmungrue3146]

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

[@afternoonsunjeans9180]

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

[@andriibibik39]

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

[@khaldounal-nuaimi3594]

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

[@salmamorales1217]

This video saved my web page's life

[@adrian20065]

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.

[@sylvie7064]

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

[@IkraamDev]

This is a very important video!

[@carbellsarfo]

Thanks Kelvin. this was helpful

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

[@shahadathossain1209]

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

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

[@debbiemurdock5544]

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.

[@thecoderabbi]

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

[@SleepyPoutine]

Thanks, some great information!

[@generationwolves]

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.

[@EzequielGarraffo]

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

[@HostDotPromo]

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

[@bkr_418]

Thank you, this solved a huge problem I had.

[@freedomman6]

perfect, thank you

[@Aabara_ka_dabara]

thankyou for this video

[@vinitabhardwaj5822]

Looking forward for more tips

[@ПетрР-р8п]

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

[@ravikiran7853]

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

[@Uncaught_in_promise]

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]

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

[@Uncaught_in_promise]

@@KevinPowell now i see

[@FragPoney]

Hey Kevin, In src, would it just return when it finds a font, rather than executing both locals and then finally the url?

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

[@AndrevwZA]

Perfectly clear. Thank you.

[@danielahermosillo8991]

Useful, thanks!

[@justsaybobby]

Can you use this for FONT BOOKS in MacOS?

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

[@ubermenschhoodrat7288]

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

[@AndreaGrandi]

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 😕

[@sinucletus1214]

Why is this better than the preconnect link method?

[@Rob-cq1nf]

Very helpful! Thanks a lot 👍

[@KevinPowell]

The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell01211

[@chillbro2275]

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.

[@codervince4957]

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

[@XeiDaMoKaFE]

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

[@jhonathanmartini9829]

is there a wap format?

[@lorenzotomasi554]

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 ?

[@palmwaytech]

Somehow - my fonts on my site , not showing up, Or the file directory is wrong. Question: Are there a good tutorial that explains this on professional level tutorial , even it it cost something to learn .

[@Hugos68]

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

[@animefanboy842]

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 .

[@cvijaymohan]

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

[@cerealrakist7360]

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?

[@dailymeow3283]

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

[@luiskmorales1850]

Awesome!

[@laurarabasco4637]

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!

[@hugocsl]

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

[@helionyxcollective]

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

[@omerakkoca8263]

Thansk for this video.

[@airixxxx]

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?

[@alexthewebdesigner1856]

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]

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.

[@karannasoulvongs1754]

hi kevin, can i get san francisco font here?

[@BunnyMp-jd5dh]

thank you so much sir

[@Victor_Marius]

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.

[@dougc84]

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]

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

[@sirisiri2416]

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.

[@petropzqi]

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

[@KevinPowell]

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

[@codingismyreligion]

There aren't any woff files in my download

[@chandjenac6872]

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.

[@clintondavispersonal]

Like the glasses, hope you are well

[@samarharbieh4813]

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

[@janelleschuh8424]

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?

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

[@georgekrax]

Do I follow the same for Roboto?

[@randomlee101]

Thank you.

[@muha0644]

why does it say fortnite in the bottom 9:13

[@KevinPowell]

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

[@niteshkrsah2222]

Really ❤️

[@animefanboy842]

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

[@KevinPowell]

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]

@@KevinPowell ok ty u so much

[@ajinkyachitale89]

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

[@KevinPowell]

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

[@rozimuhamadmuminjanov259]

Thank you

[@romuloalves9349]

Ótimo vídeo parabéns ✌.

[@AndrewMarsin]

Why not woff2?

[@nickygello9105]

Thanks sir

[@IAmLesleh]

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.

[@noir371]

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

[@Beraksekebon21]

keeviiinnnnnnn!!!!!

[@mathiaspeguet5221]

Why don't you take about woff2 ?

[@migueldomingos4570]

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

[@icebreakerkiddotvru1913]

thanks

[@Akhen.]

Didnt work

[@privymassage3458]

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

[@clevermissfox]

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?

[@александпустовит]

Спасибо

[@bertrand1208]

Merci !

[@somnvm37]

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.

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

yayy

[@KuldeepSolankiYT]

First!