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.

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

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!

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

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

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

This was very helpful, thanks a lot Kevin!

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.

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

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

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

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

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

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

Thanks Kelvin. this was helpful

Thanks, some great information!

Implemented and working! Thanks!

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

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.

Perfectly clear. Thank you.

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

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

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.

Thank you, this solved a huge problem I had.

Very helpful! Thanks a lot 👍

This is a very important video!

thankyou for this video

Useful, thanks!

perfect, thank you

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?

Awesome!

Looking forward for more tips

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.

This video saved my web page's life

Thansk for this video.

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

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.

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

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

Thank you

Thank you.

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

Thanks sir

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!

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

Ótimo vídeo parabéns ✌.

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

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.

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

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?

thanks

keeviiinnnnnnn!!!!!

Really ❤️

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 ?

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

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

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 .

Can you use this for FONT BOOKS in MacOS?

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

Like the glasses, hope you are well

Do I follow the same for Roboto?

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.

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

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?

hi kevin, can i get san francisco font here?

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

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.

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.

is there a wap format?

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

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

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.

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 KZread. Ads sucks, but they are why the content can be free and not behind a paywall.

@BMikel

3 жыл бұрын

@@KevinPowell now i see

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.

Спасибо

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

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

Why not woff2?

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.

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

Why is this better than the preconnect link method?

There aren't any woff files in my download

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 😕

yayy

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

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.

Why don't you take about woff2 ?

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

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

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

Didnt work

Merci !

third

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.

First!

I paid to avoid ads on KZread. 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?

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.

Too long videos. You should minimize them.

In this HD resolution, your pimples just jump at me. Need to use cosmetics before recording, or filters...