How to change Theme Font

Classic Themes
1

Hi
Im new to RW & am using the Mountain Theme but need to change the Font to helvetica
I know FontStack probably does the job but I have to add it to every page but I rather do it globally in the Code page
Reading through I came across CSS code that did the job for the Banner Header & Slogan as below & funny enough I managed to change the body in all pages too with * {font-family: helvetica}
but I really need the code for changing Header 3 as well please
the code that is so far working for me is:

h1.hero-title,
h2.hero-slogan {
font-family: ‘helvetica neue bold’, helvetica neue bold;
}

  • {font-family: helvetica}

Thank you in advance for your help

2

One more point I also like to change the slogan style to Normal but the command below is not doing it any advice on that would also be most appreciated

h1.hero-title,
h2.hero-slogan {
font-family: ‘helvetica neue bold’, helvetica neue bold;
font-style: normal;
}

  • {font-family: helvetica}
3

Do be aware that unless you have the actual font files for helvetica neue bought and loaded in to your project, visitors will only see helvetica neue if they have it on their device.

It will work on your device because you have the fonts installed in your Mac but a visitor using windows etc. will probably see Arial or what ever other font they have that is next in the fallback list. Helvetica (not helvetica neue) is only on ~7% of Windows machines, according to W3schools.

4

Thank you for the tip I have removed the neue & just left in the helvetica
I just didn’t like the previous Times New Roman but will consider buying the font
however I really need help with the slogan style & Header 3 font I mentioned above please

5

Just add a comma and h3

h1.hero-title,
h2.hero-slogan,
h3 {
6

Thank you Doug I have did what you said & put in in the code page but it has only updated the Home page headers & not all the other pages
As mentioned I’d like to have the slogan Normal & not Italic as well but the below code doesn’t work

h1.hero-title,
h2.hero-slogan,
h3 {
font-family: ‘helvetica bold’, helvetica bold;
font-style: normal;
}

  • {font-family: helvetica}
7

Hi Doug apologies I found the issue you are absolutely right I just had the other headings at H4 so I fixed it & it worked - thanks so much

I just now need to take out italics for the slogan if possible please

Thanks again

1 Like
8

You can add all the heading selectors by simply putting a comma between them

h1.hero-title,
h2.hero-slogan,
h3,
h4,
h5,
h6,
p,
body {

I added paragraph and body.

Im on an iPad so can’t say for sure if I have the selector correct for the slogan, but try this for the italics on the slogan:

h2.hero-slogan {
    font-style: normal;
}
9

Thx again Doug although it didn’t work for the slogan style I decided to keep the italic at the end

10

Hi Paul
I just noticed when viewing my website on my mobile as you have mentioned the font on some parts have reverted back to Times New Roman - can you please elaborate how to buy & load helvetica in my project?
Many thanks

11

I managed to fix the headings fonts on each page with HeaderPro however my Banner & Slogan fonts remained at Times New Roman when viewed by Chrome or Mobile - anyone knows how to override this to helvetica please?

If I have to install helvetica somewhere please can I have instructions
Many thanks

12


The Montain theme should load a font called “Playfair Display” an open source font available from Google. You keep calling it “Times New Roman”. It is a Serif font, so it may look to you like Times new Roman, but if it’s not loading, then you might have another issue.

Helvetica is not an open source font. You would have to purchase a license in order to use it.

You can pick another font from google fonts. If you want to load them from google, then it’s pretty easy. Self hosting is more tricky.

So here are the steps for Google fonts being hosted at google:

  1. Select a font you like, In this example I’m going to use Rubik

  2. Select Regular 400, Regular 400 italic, Bold 700 and Bold 700 italic

    2021-01-29_11-52-19
    2021-01-29_11-52-191086×1068 156 KB

  3. Make sure you have Link selected and copy all the text in the box (paste into the head
    section).

    2021-01-29_11-54-51
    2021-01-29_11-54-51390×605 38 KB

  4. Copy the CSS rule to specify families (save this for later).

Now Paste into your RW project’s Code>Head section the code you copied from Google Fonts (grey box):

2021-01-29_12-04-15
2021-01-29_12-04-151050×285 47.6 KB

My sample from Rubik

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Now for Montain theme add this code to the CSS section:

body,
.album-title,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.photo-background .photo-navigation .photo-title,
h1,
h2,
h3,
h4,
h5,
h6,
p,
.tooltip,
.popover {
    font-family: 'Rubik', sans-serif;
}

Change the Font family to the one from google fonts for the font you picked.



2 Likes
13

Thanks Doug that was really helpful exactly what I needed & sorry you’re right it isn’t Times New Roman just looked like it


Just one more thing, how to make the Banner Title Bold please?
I just added the code below to the end of CSS & it didn’t work

body,
.album-title,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.photo-background .photo-navigation .photo-title,
h1,
h2,
h3,
h4,
h5,
h6,
p,
.tooltip,
.popover {
font-family: ‘Rubik’, sans-serif;
}

h1.hero-title {
font-family: ‘Rubik bold’, Rubik bold;
}

14

Need to change the wieght not the family.

h1.hero-title {
	font-weight: bold;
}
15

You are the best Doug, it did the job
Thank you!

1 Like
16

Glad you got it all sorted with Dougs’s help.

I use self hosted fonts, because I have bought ones and I’m in the UK, so following GDPR as best I can.

I use Joe Workman’s Font Pro stack, which is expensive for just changing the font but I wanted to do some other things to the font display too.

If you were looking for a Helverica Neue Ă©quivalent try Google’s Roboto font.

1 Like
17

Thanks Paul yes sorted
I prefer the free fonts & Google options are good enough & thx for the Roboto tip its very close & good enough for my purpose
Cheers

18

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.