Changing font and size

prospero · October 26, 2014

I want to change the title font to 'Arial'. I also want to change the size. I'm using 'Turbo' theme but want to amend it considerably

I've tried adding a css to entire site with a class -
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}

I also want the title text size to be different from the body text, navigation text, footer text etc and I want to apply different sizes to them. How do I do this?

Many thanks for help in advance.

SmugSam · October 26, 2014

Hi prospero. Have you checked out any of the resources floating around where people have written up some explanations on modifying aspects of SM yet? AaronM/leftquark's in particular I found very helpful when I started. You can find it here: http://www.aaronmphotography.com/Customizations

Also, you need to be/get comfortable identifying which element it is that you're trying to restyle, by using some of the inspection tools built in with most browsers (I use Chrome). That will help you target the features you want to customise. If you provide a link to your site it may make it easier for people to help.

regards,
Sam

denisegoldberg · October 26, 2014

prospero wrote: »

I want to change the title font to 'Arial'.

New SmugMug uses Google Fonts and I don't see Arial in the list of available fonts. Help page at http://help.smugmug.com/customer/portal/articles/1248452-can-i-see-a-preview-of-the-fonts-in-smugmug- refers to the available fonts at https://www.google.com/fonts.

Once you find the font you want to use, post back with the exact location where you want to make the changes so someone can help with the CSS.

--- Denise

leftquark · October 28, 2014

Almost every computer I know comes with Arial installed so this is a font that can be loaded without requiring Google Fonts.

A simple bit of code can change text to Arial (make sure to include "!important"):

p {
  font-family: Arial !important;
}

prospero · October 29, 2014

Thanks everyone. I looked at Google Fonts but you've got to pay to download Arial.

I'd be happy to use Fonts listed in SmugMug but they are just a list of names. Would be helpful if there was an example next to each to make it easier to choose.

I've ssearched Aaron's tips. There is nothing there about Arial.

@leftquark - where do I paste this code in new smugmug. As stated above I want to change all text on site to Arail but want to vary the font sizes.

my site is http://www.abennettphotography.co.uk - You must use this full url otherwise it won't work.

Many thanks

prospero · October 29, 2014

Ah! I see. Can view fonts but only if go to Google fonts. Bit of a faff this regarding usability. Would still be better functionality within SM

leftquark · November 3, 2014

Every computer has Arial on it so you don't need to load it from Google or another place. You should be able to just call out the "font-face: Arial" and be good.

You can paste the CSS code into either a CSS block that you drag onto the bottom of your page or go to Customize -> Customize Site -> Theme -> Click the wrench next to your active theme, go to the "Advanced" tab and at the very bottom is "Custom CSS." Click edit, and put your code there.

Any code to load fonts should be at the very top.

Changing font and size

Comments