Are you wondering how to find the best fonts for your website? Choosing fonts for design and speed are important when picking the best font combination for your website.
In this video, we’ll show you 5 of the best websites to pick the perfect font for your online project.
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
Choosing the right font for your website Is one of the most important decisions You need to make because if you choose The wrong font it sends a completely Different message to your audience on What your site is about and of course You need to choose a font that also Represents your brand as a whole so in This video I'm going to talk about five Of the best websites that I know of to Discover fonts and font pairings that You can also utilize to find best fonts For your website let's go So the first website is called font pair The URL is font pair dot Co I'll leave a Link down in the description of this Video as well and you can see this is The website and you can start utilizing The website to discover fonts and font Pairs in a few different ways on the Site the first option is fonts but you Can also start using or discount fonts In a particular category if you already Have a decision or if you already made a Decision about what kind of fonts you Want to use software if sorry if slab Monospace display handwriting then you Can start discovering fonts in that Category or just go to the fonts section Here which will display all the Different fonts available on the site in A high contrast background so you can Just scroll through and you will see lot Of different fonts a lot of different
Variations and this is great for Discovering different types of fonts and Also understanding what kind of vibe Every font type and even font gives up So this you can utilize this to discover One font but if you're looking for a Different way to discover I'd say font Pairs or fonts that go well together There's another option here on the site You can also go to pairings which is I Think a more important order I'd say More useful area of the site and what This does is list Google fonts in pairs So if you scroll down you'll see tons And tons of different options that have A lot of websites or I say a lot of Fonts listed and in pairs that work well Together which is a very important thing Because mixing and matching fonts is Another I'd say a tricky thing or not Easy to understand for beginners and not Non-designers like me so once you scroll Through and you find a font combination That you like let's say for example I Like this font combination you can click This button here which will open up the Entire font combination in a new tab and What you can do is customize this text Here and you can see how it's going to Look like on this white background and Understand more if it is good for you Fair bit of warning if you do customize The text this you should pay attention To this you can change the background
Color and what this means is as soon as You start typing in this text the Background color will start changing as Well that's a feature of the site but Unfortunately there's no way to turn it Off if you want to customize just the Text let me give an example I'll just Copy a piece of text here And as soon as I paste or type in Control V since I'm pressing a keystroke And I'm pressing a button on the Keyboard the background will instantly Change like this Now if I go back to my website or go Back to notepad and copy a paragraph I Do I can do the same thing but again the Background is going to change once again So reminder So this is what happens inside this is a Great feature so you can understand what Kind of background colors will go with What once but since you cannot customize The colors and you cannot even stop the Feature from changing the colors rapidly In the background I don't think it's Very useful I wish there was a way to Turn it off now February warning don't Type the text in as I did first time I Was trying to research for this video Because it's going to create a lot of Flashing lights I'll just give an Example but fair bit of warning People See not pretty but it at least it gets
The job done the third way you can Discard fonts on fontbear.co is by using This feature called Fancy news or this Section called fonts news and what this Section does is lists down a lot of Websites with the fonts that they are Using I think this is a great way to Discover fonts that are in Trend or Phones that modern websites are using And you'll see that there are tons of Different examples present here which You can utilize and be inspired from for Example if you like this website which Is a float.com if I open it up in a new Tab you'll see this is the exact way the Home page is set up let me just switch Off dark mode and you'll see this is the Fonts that the website is now using on The site and it's listing that pop-ins And enter other font and you can also Use look at some screenshot on the Website and this is a great way to Discover find fonts that uh go together Discover fonts that are used on Modern Websites diska phones are used on a Variety of websites the only drawback I Discovered or I found on this section Was the that all the websites are very Similar they are modern business Websites so the font types are also very Similar so if you have a different idea For your website if your website is in a Different Niche altogether you might not Find the best inspiration from this
Section but it is still a very useful Section to utilize and I'd say Be Inspired with so the link to Phonepayer.co will be in the description Of this video I'll also put it on the Screen do check it out this is one of The best websites to discover font pairs According to me let's also talk about The second website The next website on the list which is my Favorite website to discover fonts font Pairings and font combinations is Fontjoy.com and there's a bunch of Options on the website to discover fonts So I'll explain all the features in a Second first step what you need to Understand is as soon as you open the Website there's a font pairing Automatically created or generated for You what you can do is first step I Would recommend is use the slider and What this slider lets you do is Define How much contrast would you want in each Of the fonts let me explain with an Example right now the slider is at Balance contrast if I just move it to Very similar let's say let's do the Opposite to high contrast and generate Then what phone joy will do is come up With fonts that are very different Looking but still go together so this is What's it's generated right now and the Fonts do look together or great together And if I just go to the opposite end
Where the fonts are supposed to be very Similar and I click the generate button Once again the fonts look very similar But again they go together so you have Some sort of configuration available to You on how fungi is actually pairing Websites or pairing sorry pairing phones And what fungi does in the background is Use AI to match fonts together I am not An AI engineer but what it does is if You if you want or if you are a AI Enthusiast then you can go to the font Visualizer here which will open up this Tensor model that they utilize to Generate fonts and understand how fonts Go work together it's pretty fascinating As a layman in AI technology so once You've selected the contrast that you Need you can switch between first dark Mode and white mode so you can Understand how the font will look like And what you can do is also uh change The paragraphs for example if I just Copy this text once again I can just Change this so that I have an idea of How my text will look like on this page I'll also change the paragraph let's Give one second And I'll just paste this now once you Click the generate button the new font Pairing will be generated for you and You can just repeat or the process Infinite number of times or many number Of times to always come up with great
Font combinations but at one point what Will happen is you'll come up with a Font that you can you might say hey I Like this font but not the other two now I want to generate uh or lock this font In and generate new fonts that are Similar to this font let's say for Example if I click generate once again And I say I like this uh cursive font so What I can do is just click this lock Button here which will lock this Particular font but I can click generate Once again to generate new font pairings That go with this font particular let's Say I now like this font this is looking Pretty awesome I'll just lock this in And I'll click uh generate once again And I can repeat the process until I am Happy with the actual all three fonts so This is one way to discover great Looking fonts and also lock your Favorite fonts in and what you can also Do apart from this is let's say for Example I like this font but I would Want I say I'm 90 sure that this is a Great font but I want just 100 I'm Looking for that extra so what I can do Is click this similar icon which will Generate or show me all the fonts that Are similar to this one and again it's Using the AI model in the background I Don't know how it works but from just a Layman's perspective and a reasonable Perspective there's so many different
Font combinations of all so many Different phones that I suggested and Ultimately what I can do is let's say I Find this one pretty good it I'll just Click it I'll close this and what will Happen is I have generated a very Similar font from the font I was already Happy with but I'm even happier with This one so the amount of customization The amount of choices the amount of Control you have when you're generating A phone combination is great excellent So that's why I prefer fungi to generate Beautiful looking fonts or discover Beautiful fonts for your website or for Beautiful phones for any website so That's font joy for you amazing website To generate font pairs discover fonts For your website the link will be in the Description of this video you can go Check it out let's talk about the next Website the next website on my list is Called mixed font and why I like mix Font is because of a particular reason I'll explain the website works very Similar to the other websites that I Mentioned you can click the start the Generator button and come up with the Font pairing but how it generates or how It presents the fonts is what is unique About mix font so let me click start the Generator and what I'll do is create a Beautiful looking page which will help Me visualize the actual fonts on how to
Look like on a beautiful website or on a Modern website so right now the fonts That are generated are these two and as You can see it's generated a hero image It's or I say uploaded here image and Generated a text for me and I can keep Scrolling and I can get a very realistic Idea about how the fonts will look like On my website if I just paste the text If the heading is here how the big or Multiple combinations of the phones Right now the heading is a big bitter or I say a big a bit bigger but you also See how the fonts will look like when They're tightly knit together they have Spaced out big they're small so it gives You a really good idea about how the Actual fonts will look like on your Website and that's not all if you keep Scrolling you'll have a lot of UI Elements also being shown up so if you Have like let's say a modern Functionality calculators you have a Date and time picker or a calculator It's like a date picker or I already Said that but if you have different Elements the mix font allows you to Visualize that right here instead of Going to your side changing the phones Understanding how it looks and this is Why I prefer a mix font and sometimes The functionality is broken because There's some other functionality or some Other things also that makes phone
Generates but sometimes it gets hung up Maybe it works for you and what you can Do is let's say if you don't like this What you can do is just scroll back to The top and you have a few different Options first of all you can refresh the Page which will generate an entirely new Font set or you can just Swap and see if That works for example if I click this Button here it'll just change the fonts So the font that was used for the Heading now goes for the paragraph and Vice versa but if I want to change a Completely new or generate completely New font pair all I have to do is click This button and now I have a beautiful Looking font combination of font pairing Once again I can repeat this process Once more and now I have another Beautiful looking font combination well The website does not give you any Filtration options like The previous website I was showing off But the visualization feature is what I Really like about this website because It lets you visualize how the website or How your website is going to look like When you use any of the fonts that mix Font is generating view so that's mix Font and why I prefer it to discover new Phones and font pairings for any website Check it out the link is in the Description of this video let's talk About the next website
The next website on the list is called Font brief which helps you discover Fonts based on their personality I'm not Kidding let me demonstrate so this is The interface for fontbrief.com and as You see if you just scroll through You'll find a lot of different fonts Being recommended to you but that Doesn't help you if you're trying to Look for a specific kind of font that's Where this section comes into play what You can do is instead of trying to find Fonts based on just your field that how The font feels you can actually define Characteristics here of a font's Personality and then based on that font Brief will try to recommend fonts to you So let me try this out for you so you Have a few different properties or Characteristics or fonts that you can Define do you want the font to be Neutral or expressive elegant or rugged Serious or friendly Technic or organic Classic or Progressive familiar or Daring loud or discreet cold or warm now Based on my testing what I've discovered Is instead of trying to find or instead Of trying to be very I say out there with the kind of font You're trying to discover have a more Generous limit to find or have a Different kinds of fonts be recommended Let me explain how that works so instead Of let's say if I want to have an
Expressive font I wouldn't just go here That is the extreme end of the Expressive Spectrum on the phone I would Do something like this so what I'm Trying to say is don't always pick the Font at the extremense have a wide range So that you have a lot of fonts to Choose from because if you just select a Font which is all extremes you might not Have a lot of different options to Choose from so neutral expressive I've Selected a font let me see elegant and I'm okay with this much serious friendly Let's say friendly is okay and neutral Is also okay to me technique organic I Would go with Organic classic Progressive let's go for classic Familiar and dating let's go with daring And we have loud and discreet so let's Say discrete is something my style and Then you have cold and warm and I would Go the warm route so as you can see I've Defined very specific characteristics in A certain range that I want my fonts to Fit in at least the forms that I will be Recommended to me and based on that Phone Breeze have has given me a lot of Different forms to choose from and all Of these are I say very beautiful Looking fonts that kind of fit this uh Overall font personality that I've Defined and based on this I can just Scroll through and discover different Different fonts new fonts and let's say
If I specifically like a certain font For example this font looks pretty good To me so I'll click on this which will Open up a new page on the site and Before I demonstrate this page there are Some other things also on this page that I can demonstrate so first thing work New is let's say if you want to have or Look at the fonts in a bigger uh or I Say bigger scale then you can use the Slider to either make them smaller or Even make them bigger that's up to you But this is the second characteristic Which you can determine and use which is I think more useful So what you do is or what you can do is You have two types of customization Options on this page that you can use so If you use these solid colors options That will change the background color of The page like this like this like this And now you have a much better idea on How the font will look like on a Specific type of background color if you Use these uh outline uh I'd say options Then it will change the font color but The background color will remain neutral So if I click this you see the font Style is changed and now the font color Has again changed and the font color has Again changed so this gives you an Option of customizing the font looking At the font in different ways to Understand how the fonts can look like
In a different kind of scenarios and on This particular page as well which is The specific page for the font itself You can scroll down and you can see a Paragraph you can discover how it's look Or looks like what the font family is Like and you have similar options on This page as well you can change the Scale of the font so you can understand How the page will look like with this Specific font if the font is next size Or whatever size and you can change the Font color or if you want you can change The background color as well by clicking These options which will give you a good Idea about how the font will look like On a particular set of background colors So that's fontbrief.com for you of Course the link will be in the Description of this video you can check It out let's talk about the next website The next website on my list is actually A community curated GitHub page not to The actual website the URL is Fembot.github.io I'll leave the complete URL in the description of this video and Also on the screen so you can understand And the benefit of this page or why I Selected this page is because first of All it's Community curated and what this Page does is just list Google fonts in Real world scenarios so these are all These fonts that you see you keep Scrolling on the page you have beautiful
Combinations of fonts available Available to you in Practical scenarios With color combinations with Palace that You're going to use on your website and Gives you a realistic idea of what fonts Go well together in what scenarios for Example if you go to Just Google fonts This is how the interface looks like Even if you find a great font you don't Know if it's going to work on your Website depending on the color scheme You're using depending on the Visualization you have about how the Page is going to look like how the home Page is going to look like how other Page is going to look like you can't Understand that without any realistic or With any realistic feel but if you go to The fembot page you can instantly Understand like yeah okay this font Makes so much sense depending on what Kind of website I'm trying to create and This is one of the best things about the Website this is community-led so you can Still or let's say it's hosted on GitHub So if you have a font pair in mind you Want to create or address or contribute To this page you can do that and because It has a few different creators or Curators this page will always keep Growing with beautiful font combination And that's the best thing about this I Have discovered many different fonts With different I'd say
Creative users with different color Palettes on this website and that's what Led me to choose this specific website Or Community page for this uh particular Video and I'm pretty sure if you keep Scrolling on this page you see so many Different form nominations look at this Beautiful phone combination with the Beautiful background you can get Inspiration about not only just the Fonts but also how to utilize certain Ones so it's not just utilized or useful Just for discovering the fonts but also Discovering entire layouts inspiration For design color Palace and all that Good stuff right here on a single page So that's the fembot page view of course The link is in the description of this Video and also on the screen you can go Check it out and these are my top five Websites of course there are hundreds of Other websites but I've chosen the Website just to give a little bit of Contrast and that's a different Contrasting functionality between all These websites but if you have a Particular website in mind that you Think I missed or I didn't include let Me know in the comments and if you like This video learn something new then Subscribe to this Channel and if you're Looking to build a website we are the Biggest resource on the internet about How to build a website and how to add
Certain functionalities on your website So make sure to subscribe to this Channel and turn on notifications so That you can receive notifications about Whenever we publish a new video you're Watching yuvraj from wpginner I'll catch You next video take care
