How to host your own fonts made simple
HTML-код
- Опубликовано: 8 июл 2024
- 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 RUclips 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!
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.
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! 😊
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!
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.
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!!
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.
just used a free font with ttf in scrimba web dev challenge, I was in unaware of 'woff'.
learned a lot today.
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.
This was very helpful, thanks a lot Kevin!
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.
thats exactly what i was looking for. one font family and then font-weight and font-style combination. Thanks!
This video is great! Thank you for talking about file formats, where to get them, how to use them and browser support. Thank you!
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.
Thanks Kevin, this worked totally, plus I now understand how font works
Thank you for the detail. I was looking for somthing like this.
Thanks Kelvin. this was helpful
well, that was the thing what i have looking for! many thanks
Perfectly clear. Thank you.
Thanks, some great information!
Implemented and working! Thanks!
This is a very important video!
@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!
thankyou for this video
Useful, thanks!
Looking forward for more tips
Very helpful! Thanks a lot 👍
Thank you, this solved a huge problem I had.
This video saved my web page's life
perfect, thank you
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.
Thank you.
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.
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?
Thansk for this video.
Thank you
Awesome!
Ótimo vídeo parabéns ✌.
Thanks sir
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
@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?
thanks
Hello Kevin, is there any way to look at any website and then understand if the font used is properly licensed?
Like the glasses, hope you are well
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! :)
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?
keeviiinnnnnnn!!!!!
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 .
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 ?
Great video, but what about preload in html for lighthouse mobile optimization? Please show how use it in html
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.
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.
One other grate class, any chance to see something about font-display?
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 RUclips. Ads sucks, but they are why the content can be free and not behind a paywall.
@@KevinPowell now i see
Really ❤️
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
I am Unable to see the imported font in the font-family as like other fonts, can you please help me with this.
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?
Can you use this for FONT BOOKS in MacOS?
how do i upload my own custom font to use it with link online like Google fonts
Спасибо
Do I follow the same for Roboto?
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.
So linking to a .TTF src instead of a .WOFF wouldn’t work?
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.
Hey Kevin, your timeline tags has a typo: Introduction is spelled incorrectly. Just wanted to let you know. But thanks for the great tips!
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.
is there a wap format?
Why is this better than the preconnect link method?
hi kevin, can i get san francisco font here?
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.
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 😕
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?
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.
My font works on desktop browser but on mobile it does not work.
Why not woff2?
There aren't any woff files in my download
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.
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
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.
yayy
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
Couldn't you just self host downloaded google fonts instead of download font squirrel fonts?
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
Didnt work
I paid to avoid ads on RUclips. 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?
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!
third
Merci !
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell01211
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...