changing overall website font and font size

  • Unknown's avatar
    creatorvilla · Member ·

    Hey all,

    I hope you are doing well. I want to change the overall font of my website and possibly the size using CSS. I want the text to be clearer and stronger to make it easier on the reader?

    I’m looking for both the code but also a list or general guide in terms of what fonts are supported by CSS?

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    creatorvilla · Member ·

    I am also curious to know what the current font is for the website .

    Best

  • staff-blorbo · Staff ·

    Your best bet for this would be to use our Custom Fonts feature, it will give you exactly what you want: https://en.support.wordpress.com/custom-fonts/ :)

  • Unknown's avatar
    creatorvilla · Member ·

    This feature is good, but it doesn’t let me enlarge the font of the default theme. I want to make the font larger, preferably by specifying the exact font (not merely small, medium, or large). Is there this CSS code for both the headings and base fonts?

    Thanks

  • supernovia · Staff ·

    @creatorvilla your site has lots of heading styles actually, and it seems it has different sizes for your excerpts and other areas of text as well, depending on screen size, etc. You can find the whole existing style here to see what I mean.

    If you can be more specific about which part you’re hoping to change, we can likely help, otherwise, do you want to try using Inspect Element to figure it out? We have some tips on that here:
    https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    The how-to videos should be especially helpful, but if you need more help, let us know.

  • Unknown's avatar
    creatorvilla · Member ·

    Thanks — I didn’t know that feature existed. The Custom Fonts feature works great now as I located the default font in the drop-down menu. The problem now is the large setting is a bit too large. I want it to be somewhere between normal and large so the reading experience is optimal on mobile and desktops.

    I want to enlarge text in the body of articles. It’s currently at 16px. I also want the headings at the top “Homepage” “Personal Growth” etc. to be enlarged. the Custom Fonts featured enlarged both, so I think they may correspond to the same code. For the text in the body, I found this using the inspect feature: 

    body {
    background: #fff;
    color: #3d3d3d;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    I changed the font size to 20 px to experiment but it doesn’t seem to have altered anything. I did get the color of the text to change using the code above. For more context, here is my entire CSS file: 

    .sf-menu > li li.current_page_item > a, .sf-menu > li li.current-menu-item > a, .sf-menu > li li.current_page_ancestor > a, .sf-menu > li li.current-menu-ancestor > a, .sf-menu > li li.current-menu-parent > a {
	color: #996209;
}

.primary-menu-responsive > li li.current_page_item > a,  .primary-menu-responsive > li li.current-menu-item > a,  .primary-menu-responsive > li li.current_page_ancestor > a,  .primary-menu-responsive > li li.current-menu-ancestor > a,  .primary-menu-responsive > li li.current-menu-parent > a {
	color: #996209;
}

.site-info::after {
	content: "© 2019 Creator Villa";
	color: #ffff;
	display: block;
	font-size: 10px pt;
	text-align: center;
}

body {
    background: #fff;
    color: #3d3d3d;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  • Unknown's avatar
    creatorvilla · Member ·

    I actually got the font to change (I added font-size: 13pt) Any reason why I wouldn’t want to code it this way?

  • kokkieh · Staff ·

    The pt value is only used for text intended to be printed, so if you had a specific printer-friendly view of your site, you’d use pt in the CSS for that.

    For the web that value shouldn’t be used, and we use px, em or a percentage value instead. You can see a more detailed explanation here:

    px – em – % – pt – keyword

    For more context, here is my entire CSS file:

    That code does not match what I see in your Customizer. Specifically, I see this:

    body {
	background: #fff;
	color: #3d3d3d;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-size: 1rem;
	font-size: 13pt;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

    The way you have it added there, you have three different font size values, and the way CSS works the last one overrides any others that precede it.

    Having just font-size: 20px; as the only value in that declaration works fine for me on single posts like https://creatorvilla.com/2019/07/23/word-of-the-day-9-modest/

    It’s not working on the post text on the front page, because body is not the right selector to target that text (it’s not the best for single posts either – you’ll notice it targets both the post content, AND the text in the sidebar widgets, and the effect it has on the widgets doesn’t look very good).

    Instead, try this:

    /* Increase font color and size on post/page content, including front page excerpts */
.entry-content, .entry-summary {
	background: #fff;
	color: #3d3d3d;
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

    The line, font-size: 10px pt; is also problematic, as you have one value there with two units.

    Remove the pt and change the value to 20px, and it will look exactly the same, but with much cleaner and more reliable code.

    I also want the headings at the top “Homepage” “Personal Growth” etc. to be enlarged.

    It looks like you already figured this out:

    .sf-menu a, .sf-menu a:visited {
	color: #3d3d3d;
	font-size: 13px;
	font-size: .8125rem;
	font-size: 12pt;
	font-weight: 600;
	padding: 17px;
	padding: 1.0625rem;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-transition: all .25s ease-out;
	transition: all .25s ease-out;
	zoom: 1;
}

    But again, I’d recommend you change the font-size: 12pt; to font-size: 17px; instead.

    Also note your plan gives you access to live chat support for help with CSS like this. You can contact live chat and private email support at https://wordpress.com/help/contact

  • Unknown's avatar
    creatorvilla · Member ·

    Looks good now. Fantastic.

  • The topic ‘changing overall website font and font size’ is closed to new replies.