How To Choose Fonts And Colors For Your WordPress Website

How To Choose Fonts And Colors For Your WordPress Website

So before you start customizing your website
and making it yours you need to do a bit of prep work now would give you a quick crash
course on choosing fonts and colors for your website that you’re going to use when you’re
making your website look the way that you wanted to look now I go over these topics
in much more depth in the courses available on my website I just want to give you a quick
crash course of some resources that you can use to identify fonts and colors that Juergen
and need to customize your website make it look how you wanted to look so for software
going to talk about fonts and here’s a website I like to go to it’s called a font
and you can come here and see different fonts and how they look together now typically on
your website you’re going to want to fonts or maybe three depending on how you’re going
to design your site but you typically have one font that your headline and you would
use this for the different headlines throughout your site and you typically find it in your
menu and then you would also have a font for the body of your website and then sometimes
you might have 1/3 sub headline font in this time sometimes you see it’s a cursive font
and it really kind of draws your eyes to it so the way fonts work with websites is that
Google has something called Google fonts and it’s pretty much integrated into all aspects
of WordPress and your to be able to choose these Google fonts with a drop-down menu so
this website actually shows you some really good font pairs so it’s already done that
pairing for you it’s kind like when you go to a fancy steak restaurant and they’ll pair
the wine to the meat that you’re ordering this is essentially what it’s doing but for
fonts soon come down here and then you would just scroll down and see the name of the font
you like so here’s a headline and then here’s the body so the headline is the cabin font
in the body font right here is the old standard of font and you can just scroll down and they
have font pair after font bear in fact I actually recently use this website to find a font pair
that I liked for one of my other websites I really like this newly found right there
that’s nice it’s amazing you want to come down here and you want to pick out two fonts
whatever you like and you don’t have to stick with their pair if you like this headline
but you like this body style right here you’re would want to choose moodily and this font
right here and that would be the font that you choose now typically when you’re on the
page builder urine to be able to choose different thicknesses for the font as well to make it
stand out a little bit more so this is just a little quick crash course to fonts now the
next thing you need is colors and here’s a website that I like to go to to find colors
now if Yorty have a logo design typically you can extract the colors or from that logo
and go with those colors through the design of your website but you can also use this
website it’s called now there’s 20’s and its CEO OL and you can come
here and find lots of really neat colors and find the ones that you want to use on your
website and kind of similar you’re going to typically have two colors but sometimes you
might go with three colors so you usually have your primary color and that’s going to
cover about 60% of your website and then you would have your accent color and that’s going
to cover about 30% of your website or 40 now if you did want to go with that third color
I like to call it the pop color it’s going to be different from the other two colors
and when someone’s on your website you want to use that color to where you want their
eyes to gravitate to so this could be like a a button nor a phone number or something
like that or some form of a call to action and that’s the use of that pop color you don’t
have to but you can use that if you want so you would just come to this website right
here and I like to click on the explore option right there and when you do that it’s gonna
show you a variety of of color palettes now what we’re after is every single color has
something called a hex code and it’s the #and six characters after that can be letters or
numbers and when you get those hex codes that’s what you’re going to copy and paste throughout
your WordPress website to get that exact per size color it is these hex codes so for instance
if I’m here and I like this color palette right there I would click on view and it’s
can open up a new tab and it’s going to generate my colors, just click on this X right here
and you see there are the hex codes right there so I can just highlight this hex code
and then when I paste this into WordPress it’s going to generate this exact per size
color so you want to get these hex codes now you’re also gonna have for a lot of things
you do in a page builder you have a color picker work or you can have this dialing you
can choose your color that way but it’s very hard to find a color you want it’s really
good to come to websites like this that have such a variety of colors schemes that are
already put together for you that you can really just discover what you like and that’s
a lot of the problem with building your own website is just discovering what you want
and so this is a great tool for that so these have been two great ways to one find fonts
into fine colors you’re gonna want them because when you restart building a website you’re
gonna want those color codes in your gonna want those names of those fonts that you want
to use in your website

9 thoughts on “How To Choose Fonts And Colors For Your WordPress Website

  1. Discovered your videos a few days ago while looking for help with LifterLMS. Your videos are excellent! (Just enough details, a good helping of overview, and drill-downs to what we need to master a tool.) The resources you share are worth their weight in gold. 🙂

  2. Hey Adam, Great series of videos. Learning tons.

    I have a bit of an issue. I followed all your directions in this video and copied and pasted the CSS file. I replaced the hex color codes in css for the two colors – blue and pink – with my own hex codes. Exactly as you explained. And yet, the top menu bar that was created, with courses, purchase etc, is still showing in blue and pink (with mouse-over). I double-checked everything and I think I have it right. Any ideas on what I should look for?

    My understanding is that at the theme "level," we set the global settings for the whole site. So I won't be able to change these settings (for the top menu) with the page builder, correct?

    Of course, I can just buy GP Premium but I think I may eventually go with the Thrive Suite. Just using this as a test case. Will do the same with the Thrive Setup and ultimately go with one setup and invest the $$ likewise.

  3. thanks adam- learnt 2 new things – coolours and fontpair 🙂 i am generally pretty good ith both – but still i liked that their are tool out there and not everyone might have a good design eye.. 🙂 <3

Leave a Reply

Your email address will not be published. Required fields are marked *