Increasing Size of Body Font

TheBradford

There seems to be no option for increasing the size of "body font" which is a major hinderence as some of these fonts (for example Covered by Your Grace) are really small in the "400" size. I used Google fonts on my my legacy page and would like to use the same ones on my new site however their default size is far smaller than the size it was on my legacy site and does not look good without being larger and more bold.

How can I make this adjustment?

linyangchen

This CSS code might be part of what you're looking for (found it here):

body {font-size: 150% !important;}

As jfriend says, it doesn't work on everything. On my new SmugMug site, it works on the wording (but not the '>') of the breadcrumbs, gallery descriptions and a couple of other bits and pieces. It doesn't work on the captions.

If you try it out, you'll notice that the line spacing doesn't scale up with the font size, causing lines to start to overlap. I haven't figured out the CSS to change the line height, nor to change the caption font size, unfortunately. I'm sticking with the defaults for now but will keep my eyes open.

Best regards,

Yangchen

linyangchen

Update: see Aaron Meyers' webpage on changing title and caption font sizes - the line height adjusts appropriately too. And that's just one of 48 pages of useful customizations.

TheBradford

linyangchen wrote: »

Update: see Aaron Meyers' webpage on changing title and caption font sizes - the line height adjusts appropriately too. And that's just one of 48 pages of useful customizations.

I've looked through these and can't find what I am looking for. Go to my page - what I want to do is bold the font for where it says "Galleries" "contact me" etc. Have i missed something?


I have however used other customizations from Aaron's great page but was nto able to find what I was asking about in this thread.

beardedgit

TheBradford wrote: »

I've looked through these and can't find what I am looking for. Go to my page - what I want to do is bold the font for where it says "Galleries" "contact me" etc.

Try this:

.sm-page-widget-nav-toplink {
    font-weight: bold;
}

Sorry about the late edit.

TheBradford

beardedgit wrote: »

Try this:

.sm-page-widget-nav-toplink {
    font-weight: bold;
}

Sorry about the late edit.

That worked! Woo - that really needs to be made more widely known. Next question based on the success of this one. How do I make it bigger and if possible even bolder (just want to toy with my options for optimal results.)

Lastly - how do I make the font in the folders (after you click galleries) bigger and bolder too. Those whom I've shared the site with so far since unveilign have said they like the font it's just to skinny to read. but Bold on this the same way as you noted above would be a great change for starters.

Thanks for the assist!

beardedgit

TheBradford wrote: »

How do I make it bigger and if possible even bolder (just want to toy with my options for optimal results.)

.sm-page-widget-nav-toplink {
    font-weight:XXXXXX;
    font-size:YYYYYY;
}

TheBradford wrote: »

Lastly - how do I make the font in the folders (after you click galleries) bigger and bolder too.

.sm-tile-title {
    font-weight:XXXXXX;
    font-size:YYYYYY;
}

For each of the code snippets above, substitute appropriate values for XXXXXX and YYYYYY as per the following:

For font-weight values, see http://www.w3schools.com/cssref/pr_font_weight.asp
For font-size values, see http://www.w3schools.com/cssref/pr_font_font-size.asp

For other properties and values, and how to format them, have a shufty at http://www.w3schools.com/css/css_syntax.asp

TheBradford

beardedgit wrote: »

.sm-page-widget-nav-toplink {
    font-weight:XXXXXX;
    font-size:YYYYYY;
}

.sm-tile-title {
    font-weight:XXXXXX;
    font-size:YYYYYY;
}

For each of the code snippets above, substitute appropriate values for XXXXXX and YYYYYY as per the following:

For font-weight values, see http://www.w3schools.com/cssref/pr_font_weight.asp
For font-size values, see http://www.w3schools.com/cssref/pr_font_font-size.asp

For other properties and values, and how to format them, have a shufty at http://www.w3schools.com/css/css_syntax.asp

Ok I have tried with partial success. The bold has stayed regardless, but won't get bolder when i increase teh value, but the height won't change.

I have tried

/* Nav Bar Size and Weight */
.sm-page-widget-nav-toplink {
font-weight:700;
font-size:18px;
}

and
/* Nav Bar Size and Weight */
.sm-page-widget-nav-toplink {
font-weight:700;
font-size: h1;
}

Please let me know what am I doing wrong as I have followed the links instructions. I want to essentially make the size of the font on the menu bar "double" the size of what it currently is and thought H2 (200%) did that and that did nothing so then i tried H1 and that didn't work either.

TheBradford

ooh wait i did 250% instead and that changed it. so question still remains for the bolding

as well applying the same weight/size changes to the gallery names.

beardedgit

Hmm... maybe you need to put in some "!important" declarations to prevent other settings overriding these:

.sm-page-widget-nav-toplink {
font-weight:XXXXXX!important;
font-size:YYYYYY!important;
}

.sm-tile-title {
font-weight:XXXXXX!important;
font-size:YYYYYY!important;
}

beardedgit

TheBradford wrote: »

Lastly - how do I make the font in the folders (after you click galleries) bigger and bolder too. Those whom I've shared the site with so far since unveilign have said they like the font it's just to skinny to read. but Bold on this the same way as you noted above would be a great change for starters.

I think I've misunderstood what you meant there. Any chance of a screenshot showing exactly what/where you mean?

TheBradford

I can't do a screenshot at the moment but if you go to my website, click "Galleries" what I want to do now is "bold" the titles of each folder and gallery so Like i want "Concerts" to be bold. if possible maybe a little bit larger too. I assume it's doing the exact same thing I did to bold and increase font size for the nav bar, but I just don'w know what to put as like .sm blah blah blah font-weight etc.

beardedgit

TheBradford wrote: »

I assume it's doing the exact same thing I did to bold and increase font size for the nav bar, but I just don'w know what to put as like .sm blah blah blah font-weight etc.

Yeah, often the hardest part is finding out what the correct property is. Using something like the Developer Tools in Firefox is really helpful for identifying what's what. In this case, the property that needs tickling is .sm-tile-title

Try:

.sm-tile-title {
  font-weight:bold!important;
}

and season according to your tastes.

TheBradford

cool that worked - can I make the font slightly larger in size I put font-size: (and then a number)!important

but that did nothing.

As well I can't find the property from earlier for adjusting the bold and size of the nav bar in my Theme's CSS...yet it has to be there since the change is still holding. Do these change "move" somewhere after the change happens in certain situations? I know I am positive, that I put that in the Theme's CSS - yet its now not there. I don't want to change it or anything, just want to keep this and that together for future tweaks if needed.

beardedgit

TheBradford wrote: »

cool that worked - can I make the font slightly larger in size I put font-size: (and then a number)!important but that did nothing.

If using a number you need to give it some units. % or px or whatever, and don't forget the ; after the !important. Have a play with the examples at http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=10px

TheBradford wrote: »

As well I can't find the property from earlier for adjusting the bold and size of the nav bar in my Theme's CSS...

Maybe it's in an Entire Site content block?