A few people pointed out this tool for getting Google fonts, which gets you the font, including converting it and the @font-face declarations - gwfh.mranftl.com/fonts/

@le_wuerzingeer

Жыл бұрын

yes this tool is absolute wonderful and save a lot of time

@TomisaburoRMizugawa

Жыл бұрын

Last time I checked (a while ago though) Google would provide both the woff/woff2 files as well as the @font-face style sheet if you looked for it

@DereC519

11 ай бұрын

awesome tool!

@keigreencap9192

4 ай бұрын

@@TomisaburoRMizugawa this is still true the woff files are linked in the stylesheet and they are typically a bit smaller than self converted files

@iamtharunraj

2 ай бұрын

Awesome tool but looks like it's from the 90s lol

Hello Kevin, I am a Junior developer. I started coding in March of 2022 and I wanted to say thank you for your videos on KZread(especially one on responsive - you built a blog site). You are a great tutor. I landed my first job as full stack developer. Thank you sir

@KevinPowell

Жыл бұрын

That's amazing, congrats!

Can't wait for the video on variable fonts, really interesting

As a Web UI Engineer your channel is the best resource for learning CSS in deep, all the topics are very well explained and really encouraging people not to be afraid of work with CSS. Thank you for sharing this content with the community

I was literally searching about this an hour ago. How did you know I needed this?

@hiryuimajin

Жыл бұрын

He is always like that lol!

@igorjerkovic4891

Жыл бұрын

Me too..

@dastaan3468

Жыл бұрын

Google

Once again you've achieved a good mix between a tutorial and a discussion of relevant issues. It's very noble of you to always reference ARIA during your videos. Message from your BR fan: TÚ É BRABO, FECHAMENTO! TMJ! 🤟🏻

Thank you, Kevin. That was helpful, because I have to deal with the German GDPR and I will use this for sure. As always happy to have your content at hand. 🤝

I gotta say, I love your vibe and energy. Your content is always engaging, informative, and concise. As a self taught web developer, I really appreciate the work you do.

Ever since i discovered this channel, my learning has been much quicker. U make every problem of mine much simpler to understand, and i would like to really say i appreciate u very much for ur help

thanks! I totally needed that walkthrough!

You read my mind lol I was just looking into how to host fonts. Thank you soooo much :)

Great video! Thanks Kevin! 👍

Thx. Exactly what I was looking for and easy to understand.

Just in time!

Thank you Kevin, I host them already locally but it is good to be conscious to know what it does.

Thank you so much, Mister Kevin!

Once again, Kev saving my life

Fantastic explainer and tutorial, thank you!!!

Thanks for this tutorial Kevin, you are my go to CSS source of truth :)

Once, I had a problem with the font 'Geomanist'. The rendering between the Web font version I had and the one which was on my computer was way different, and the one on my computer was pretty ugly. Since that time, I want to be sure that websites I work on are using the version of the font they provide, so I rename the font-family inside the @font-face with something like 'Geomanist-web' instead of just 'Geomanist'. It's just a simple trick :)

@traziverse

Жыл бұрын

Thats really a good idea. I think i'll find a use case for that :D

Great! Really helpful.

thanks for helping me make my part of the internet more awesome!

Amazing Video as always

Your videos are sooo great. I thanky you so much KEvin! I'm living in Germany and it is really a problem if you use google fonts. So thanks for the great and short explanation :D

This is awesome thank you sir.

I'm from Germany and started learning in November and came across this problem. And now you just make a video about it and even mention my country 🤣

Thanks, this is informative.

Kevin is the man!

wow, I had no idea about that webfont optimization and had not really heard of all the cross site cache no longer working.... good to know!

Thanks for this, took a while to get up and running with Tailwind but I'm loving it... Interested in what'll be the differences with the "variable" fonts.

Good Stuff!

Literally just got a ticket to fix this issue at work!

Thanks Powel

That's what we're dealing last couple of months hier in Germany. It could be result from 100€ up to 250,000€ fine. Thanks you for addressing this issue.

@Gromran

Жыл бұрын

@@THEROOT1111 Not by auhorities. But by shady lawyers

@DerLuukee

Жыл бұрын

@@THEROOT1111 worst thing is recaptcha. It does communicate with google the moment you load the page, even before the user has said yes to this data flow. However, you can't wait for the users approval to use recaptcha. Like this bots could just spam your system. GDPR is a pretty stupid, not well implemented system.

Looking forward to watch the variable fonts

Thank you for this. This allows me to use more fonts in my projects without offloading my user's privacy by using Google fonts thru the usual means. The idea of loading site data from a dozen servers always made me uncomfortable. This way, it is all local.

Thank youuuuuu

1:21 A variable font tutorial will be cool :)

Tabular Numerals is an expert setting on font squirrel that comes to mind as an important one. It is used for font-variant-numeric: tabular-nums; so a counter or time doesn't change width when changing values. E.g. 08:00 will be the same width as 11:11. Very useful

@JonRonnenberg

Жыл бұрын

One thing to be aware of, is that the font must support tabular numerals or it won't work. Google Font sometimes use very old fonts with limited features.

Hello Kevin, great video, been using this for a while as a kinda template with switching just font src. I have two questions if you Kevin or you guys encounter. First is, how much can you further optimize font file if you add unicode-range prop, is it worth the trouble and second is if you @import google font, cdn, and you go to Page speed Insights and Google is complaining about their font and optimization, is it better to host font or not ??

@Kevin Powell Are you making use of NVIDIA's new "Eye Contact" feature in this video?

Hey Kevin, when you set multiple sources for font-face, is there a way to check which one of them browser is actually using?

Excellent. I've built my site already and would like to implement this. Will I lose all of my font settings and have to set up my fonts again on all my pages? Thanks

Hi Kevin, I'm new to CSS, HTML, and JS. For my Bachelors Thesis I want to build a study and change fonts and colors for specific stimuli. Where do you save the fonts in your project/ folder at 5:50? I don't quite understand how to create a project with different files and sites or where to save the files. Thanks in advance!

Is that a custom Lorem Ipsum based on Middle Earth?

Nice to learn something new. Do you have a video showing how to make a CSS responsive nav for desktop and mobile?

Nice,but i didn't understand how font weight is mapped to font file , i mean How should i know that a downloaded font file maps properly to a font weight?Thank you!

Hello Kevin, I hope you are doin well. I have a quick question: What if I want to use regular font but with different font-weights, do I need to set a font-face for every font-weight or there is another way? For example I would use 3 font-weights on my website: 300, 400 and 800. Thanks in advance.

Kevin, what VSCode theme are you using in the video? Is it just the default one? Love your vids btw!

@milogray98

Жыл бұрын

This is the Atom One Dark Theme

@codyfingerson743

Жыл бұрын

@@milogray98 awesome! Thank you!!

I'd be wary of using all of the default settings within FontSquirrel. In particular, if I remember correctly, it automatically applies subsetting. In my home country of Aotearoa New Zealand, at least, their default "basic subsetting" unfortunately strips out important characters used in our indigenous language te reo Māori. The result of this subsetting is that, any time a vowel with a macron (e.g. āēīōū) appears, that character will fall back to another font. The way to avoid this is to either not apply subsetting at all (my personal preference), or to take the time to deliberately choose what subsetting to apply.

@lawrencedoliveiro9104

Жыл бұрын

I had a look at their “Expert...” settings page. There was nothing relevant-seeming there until I selected “Custom Subsetting...”. Then a list of languages appears, but Māori isn’t among them. (All the ones shown are European, except Turkish and Malagasy. And “Cyrillic” is listed as a language--who knew?) There are also lower-level options for choosing “Character Type”, and also “Unicode Tables”, “Single Characters” and “Unicode Ranges”. You probably have to experiment with these to see which one(s) produce the right results. Seems to me like a job for a command-line tool...

I had this strange issue in my company that if I use font-face to import files (otf/woff or EVEN local() doesn't matter) it becomes blurry on edge/chrome but works ok on mozilla (and mobile Edge) but if I don't use font-face but just provide the font name (installed on all pcs) then it's not blurry. I tried importing this so it could be shown on mobile. Any ideas why fonts served via font-face become blurry? :/ I tried playing with antialiasing with no avail.

Did the video on doing this with variable fonts (and the extra steps involved) ever get made ?

Thanks Kevin, google fonts weren't loading for me using the regular import & as the files we too large and browser has to wait to download them before continuing to render the page

Google fonts provides 2 variations for Nunito Sans, 7pt and 10pt ttf files. What's the difference b/w them and which is standard one?

Kevin, I've been working on a navigation bar for my site and wanted to make a trapezoidal button as the center button. I was able to achieve this buy creating before and after elements that are angled and attached to the original element which is a rectangle. That works completely fine, except I want to apply an outline around the whole shape(including the pseudo elements) that's offset by two pixels. Whenever I try and apply that CSS however, it does it only around the original element but not the pseudo elements. Do you know of any way I can achieve this effect? Thanks!

@QwDragon

Жыл бұрын

Use backgrounds with gradients instead.

@meepk633

Жыл бұрын

You could try filter: drop-shadow() with low blur. What happens when you put outline on the pseudoelements?

For the font-weight declaration, do you have to use numbers? Or could you set the font-weight within @font-face to something like 'light' or 'medium'? And then can that be referred to in my css on (in this video's example) the body?

@moy2010

Жыл бұрын

You have to use numbers. If you use a string, your styles will simply be ignored because it's not a valid value. That's how CSS deals with errors.

What about icon fonts? Are they handled in the same way?

Shouldn't you add `font-display: swap` to it to prevent blocking time? Or is that not needed with self hosted fonts?

@nedveddev

Жыл бұрын

I was also curious about this

Hi kevin is it useful for CWV ?

GDPR is ruining the web. I can't make my corner of the internet 'a little bit more awesome' when I have to make the user read, select, check and accept all kinds of dialogs and T&C's before they can use my site. Nice to know I can use this to 'step around' that headache for fonts at least. Thanks Kevin.

@oohnajra

Жыл бұрын

It's not GDPR that's ruining the web, but it's companies like Google that don't give a crap about people's privacy and use their "free" services (like Google Fonts) to gather as much information from unwitting website visitors as possible. If it weren't for their actions GDPR wouldn't even be necessary.

Just one heads-up: when i converted the font to woff using font-squirrel (Poppins in my case), using the Optimal setting, it clearly loose quality and precision in render. So, i changed the setting to Basic and it worked fine.

is there a way to download and self host Adobe fonts instead of making calls to typekit?

Can you show how to do it in scss? It never works for me there.

Hi Kevin, - I don't understand why you use "format". Is it really useful ? - Is there any way to declare all the family in one decorator or at least to reduce the code ? Because it's duplicating a lot. Have a good day :)

How to make it work when not using index or your file html file is in a folder? How to handle global declarations

You mentioned using the filename for the local() function in the font-face rule, but surely it's the installed name or some other metadata? For those on a Mac, I suppose you'd open Font Book to find it.

@KevinPowell

Жыл бұрын

No, you simply put in the font's name! You can even see this working installing a Google font on your computer, and then using it for a website without ever linking to the font anywhere in your CSS, and it'll work. Once a font is installed on a system, the computer is smart enough to figure things out from there (thankfully). You can see bit more about it here: developer.mozilla.org/en-US/docs/Web/CSS/@font-face#description

I haven’t had the chance to watch the whole video yet but what are the benefits performance wise? I used to find using font-face would show a pop-in when the page loads is this no longer the case?

@stevesmith8456

Жыл бұрын

Watched a bit more and you answered my question thanks

Was stuck on this part here 9:35. Applying my font would not work. On the 'elements' tab it would show that I did indeed apply the font, but the font would not display on my text. The issue was the url() import in my font family decleration. Instead of doing url('assets/fonts/etc') I had to do url('../../assets/fonts/ect'). This means I had to do relative paths to get the font working in my URL path. Just a tip for anyone else if they were stuck!

I downloaded Open Sans but when I tried to upload them to font squirrel I got the warning: "The font 'opensans_condensed-bold.ttf' is corrupt and cannot be converted." Is there an issue with Open Sans, or is that something on my end? Also, in the Static folder I had other folders: 1. OpenSans, 2. OpenSans_Condensed, 3. OpenSans_SemiCondensed.

@najmantube

Жыл бұрын

I got the same. Also for 'Montserrat'. Could be that it is primarily a variable font and the static files are some kind of backup?. (Folders 2 and 3 of 'Open Sans' are just variants. You can, or should, be able to ignore them. Academic at this point, as the static files are considered to be corrupted by Font Squirrel). Anyone out there got an answer for this?

@JimKernix

Жыл бұрын

@@najmantube I switched to Roboto and that solved the issue

@najmantube

Жыл бұрын

@@JimKernix Yes, Roboto works, so does Lato. However, a different font than those might be required.

@najmantube

Жыл бұрын

Hmm. my comment keeps being deleted. I'll try again. I got Open Sans embedded by using a different web font generator. I had to upload and convert the (static) files one at a time, but it worked. I can't include the URL, but if you search for 'Webfont generator - Creative Fabrica' you should find it.

@ChrisMits1

Жыл бұрын

Just switch to another webfont generator, plenty out there. Try "Fontie" or "Transfonter" which are also online tools, seem to be working fine (minus some features). I found out that the issue you are facing, maybe it is somehow related to this: "A number of freely licensed fonts can no longer be converted to webfonts due to false positives on some kind of generalised blacklist. It seems that the vendor of the font is checked on upload and if that vendor also sells retail fonts then the uploaded font cannot be converted."

I usually download the files from google fonts so i don’t have to write the CSS. And yes I know that’s probably more work ahahaha :)

If I'm remembering correcly I don't think Safari will load local fonts anymore.

Not 100% sure UK has to abide by new GDPR updates as we obviously stepped out of EU a few years ago.

great tutorial, but could you do a video on why i should care about GDP in the first place for my personal projects or websites focused on my country not europe

Is there a video about hosting variable fonts? Mentioned wanting to make a vid but I’m not sure if it was ever completed ?

@KevinPowell

3 ай бұрын

I think it was this one: kzread.info/dash/bejne/YpqK28-KZ7bAp5M.html

@clevermissfox

3 ай бұрын

@@KevinPowell awesome thank you, I had already watched it too , you'd think I would remember that it exists 🤦🏻‍♀️

Sir I don't know why drag and drop doesn't work for me in vscode. And I just got into programming recently. Please help me.

Kevin, you should make a video about `contain: paint` its really useful with `position: sticky `

9:29 the wording caught me off guard. 😮 🤣 💦

This is great, thanks Kevin. Does this mean I don't need to enqueue my fonts in WordPress?

@NielsPilon

Жыл бұрын

Yes, no need to enqueue them when using @font-face in your theme’s stylesheet. Just make sure to add the font files to your theme as well.

@outpost31737

Жыл бұрын

@@NielsPilon Ta!

Be careful, There is a look alike page that "offered to install a necessary browser extension" It was like "font squirrel" but spelled incorrectly. I accidentally used 1 R and 2 L and almost got a virus.

Strange, my custom fonts won't load. @font-face { font-family: "AddingtonCF"; src: url("/assets/fonts/addingtoncf-light-webfont.woff2") format( "woff2", url("/assets/fonts/addingtoncf-light-webfont.woff") format ("woff") ); } Absolute pain the in neck. The file path is correct.

어렵네요 폰트를 다운로드 후 코드로 변환해서 삽입해주는게 핵심인가요? 제가 이것을 제대로 이해한 것이 맞나요

lol was working on setting fontface and you showed up

Man the amount of time I've seen people define font-face where each declaration is a different font-family name is baffling to me. So for example define Roboto-Light, Roboto-Regular, Roboto-Bold and then when you need a bold font, you don't specify the weight, but rather the font-family. It just doesn't make sense to use it that way, but I've seen it in codebases quite a few times.

Some Google fonts are labeled as corrupted by fontsquirrel. Tried redownloading, it's always the same fonts, i.e. Alegreya and others.

@KevinPowell

Жыл бұрын

Check my pinned comment, I have a link to another tool there

Fonts are a minefield now. If it’s a bought one you often have to download a ‘web’ version not ‘desktop’ and then a lot still place arbitrary view counts in them. I just want to buy a font and use it. But seems to be very hard now with providers wanting you to pay to get it and pay to use it.

Awesome 😎

How likely do you think it is that other web developers might get lazy and link to copies of the fonts on your server, instead of providing their own copies?

@KevinPowell

Жыл бұрын

I feel like that's more work than setting them up yourself 😅

Tip: preload font files in the head for better CWVs (core web vitals) performance.

@najmantube

Жыл бұрын

How do you do that?

@darz_k.

Жыл бұрын

@@najmantube - within a tag.. same code as Kevin uses in the CSS file

@najmantube

Жыл бұрын

@@darz_k. Thanks :) I had to look this up - CWVs = Google’s Core Web Vitals

@darz_k.

Жыл бұрын

@@najmantube - I had to look CWV up too! ;oD

@joedyer1989

Жыл бұрын

@@najmantube It's not a style tag, you need to use a link tag:

Nice, but if you show something on the screen and it's covered by you, move yourself in the edit so we can see what you're showing :)

700k subs!?!? Where does time go???

What about a video on how to host this on a server, paid hosting server.

lol on front end friends ... apologise i heard this for the first time and made me caccle

Hey Kevin, can you do a video basically complaining vicariously about the ::backdrop pseudo-selector? I am extremely disappointed with how inflexible/non-standard it is, especially from the perspective of programmatic style manipulation and use of custom properties. (Custom properties on ::backdrop *not* inherit from their parent elements!) Edit: so maybe I didn’t ask this question in the most flexible way I am just extremely frustrated that I can’t get this to work the way I hoped it would.

Are you using this new nvidia thingie which manipulates your eyes ?

This doesn't work with localFont?

Small tip to spare you the head scratching: If you thought you could use a custom property for the font family name inside the @font-face block and where you use it to make sure it's working - forget about it. Properties don't work inside of @font-face.

@meepk633

Жыл бұрын

Do you mean using something like, font-family: 'mont'; instead of font-family: 'Montserrat'; ? I think you can. According to the spec for font-family, "This descriptor defines the font family name that will be used in all CSS font family name matching. It is required for the @font-face rule to be valid. It overrides the font family names contained in the underlying font data. If the font family name is the same as a font family available in a given user’s environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts..."

@chrishuhn5065

Жыл бұрын

@@meepk633 No, I meant defining :root { --fontName: 'CollisionFreeRobotoFontFromWeb'; and then using using *var(--fontName)* instead of a font family name as a literal string in the rest of the css file(s).

Mona sans is 👍

Idk why this is normalized you are sending your users data to google im pretty sure. Just put it on your website - same with images

There is probably a way to avoid this unnecessary manual work with a Vite plugin

First comment