Is it possible to redefine h1, h2, h3 fonts?

sgrotta · January 14, 2018

I want to define some of my headers to be small caps. How do I do that?

sgrotta · January 14, 2018

Specifically, on pixels.smugmug.com, I want the titles American Hands and Other Projects to be in Small Caps.

Hikin' Mike · January 14, 2018

This will change those titles to small-caps:

.sm-user-ui .sm-page-widget .sm-page-widget-header > h2{
    font-variant: small-caps;
    }

I would add that into your site-wide theme's CSS.

sgrotta · January 14, 2018

Yay! That worked. Thanks, Mike. Now to find the font that looks most like the one I'm using for my main website.

I really appreciate all your help and advice.

Hikin' Mike · January 14, 2018

@sgrotta said:
Yay! That worked. Thanks, Mike. Now to find the font that looks most like the one I'm using for my main website.

Looks like you're using 'Georgia' on your WP site: * { font-family: Georgia, Times, "Times New Roman", serif;}

sgrotta · January 14, 2018

So I own Georgia and it's on my computer. How do I install it into my SmugMug gallery? thanks!

Hikin' Mike · January 14, 2018

You can look at this to add different fonts here: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts. Since you are using WordPress too, you can create a directory (folder) called 'fonts' and upload the fonts there.

Since you are using that font on both headings and body you'll need to add this to your CSS * { font-family: Georgia, Times, "Times New Roman", serif;}. If that doesn't work try this:

.sm-user-ui h1,
.sm-user-ui h2,
.sm-user-ui h3,
.sm-user-ui h4,
.sm-user-ui h5,
.sm-user-ui h6,
.sm-user-ui p { font-family: Georgia, Times, "Times New Roman", serif;}

sgrotta · January 15, 2018

Thanks, Mike. Two questions...

Since I'm dealing with Georgia which is a very common font, do I still need to add it to a folder and link to the URL as you show in your tutorial? Or can I simply use the above code to define my font as Georgia for the entire SmugMug site.
Also, am I correct that the above code should go into my theme's CSS field? If not, where should I put it?

I appreciate all your help . Best, Sally

Hikin' Mike · January 15, 2018

I'm 99% sure that you really DON'T need to upload the font. It is a common font so most computers should have it loaded. All you'll have to change is this:

.sm-user-ui h1,
.sm-user-ui h2,
.sm-user-ui h3,
.sm-user-ui h4,
.sm-user-ui h5,
.sm-user-ui h6,
.sm-user-ui p { font-family: Georgia, Times, "Times New Roman", serif;}

To answer your question, it will go with the other custom CSS you've already added, your theme's CSS.

sgrotta · January 15, 2018

Thanks!

Is it possible to redefine h1, h2, h3 fonts?

Comments