I want to change Font and size for the Engineer Theme

Classic Themes
1

I am making a site using the Engineer Theme which I really like but I Cannot find a way to change the title font and size.

I have searched and someone pasted a CSS code, I have tried that but it changed nothing. The code was

  • {
    font-family: ‘Open Sans’, sans-serif;
    line-height: 140%;
    }

The title I want to change is on this page

http://www.jehallett.co.uk/test

2

OK,
I’m assuming you want to change is the title in the hero area?

2019-07-20_10-12-34
2019-07-20_10-12-341043×395 80.7 KB

For the Title itself try adding this:

h1.hero-title {
    font-family: ‘Open Sans’, sans-serif;
    font-size: 4.5rem;
}

If you want to change the “slogan” as well then try adding this:

p.hero-slogan.display-4 {
    font-family: ‘Open Sans’, sans-serif;
    font-size: 4rem;
}
1 Like
3

Thanks for that, I have tried it and played around with the font-size, I can make it bigger, which is not what I want, I want to make it smaller. If I set the size as 0 then it disappears altogether, if I set it to say 0.1 then its the same size as it there was no code.

Whilst we are on the font subject, what fonts can I change it to. The owner wants the font ‘Fruitiger’ never heard of it but apparently its similar to Helvetica Neue. Is it possible to change the whole site to a new font and not per page?

4

Try taking the space out between the numeric valve and the unit (rem).

Right now you have:

h1.hero-title {
    font-family: ‘helvetica neue’, helvetica neue;
    font-size: 0.1 rem;
}

Try:

h1.hero-title {
    font-family: ‘helvetica neue’, helvetica neue;
    font-size: 0.1rem;
}

of course 0.1rem wwould be wqay to small. The default is 4.0rem
`

5

Ok I found it by looking at examples of CSS code and I needed to change the font size coding to ‘font-size: 2.5em’ so ‘em’ and not ‘rem’

6

The Theme uses rem( rem (root em) units) relative to the root (html) font size where em is relative to its direct or nearest parent.

em’s were available first in browsers. rem’s added later so a lot of “older” references tend to show examples in em’s. All browsers now (iOS > 5), IE > 8) support REM as a unit of measurement.

So the answer is either would work. You can end up with very different results using em vs rem as they are relative measurements to different elements. Most modern designs are now using rem because if elements direct or nearest parent change then the element might unexpectedly change.

The reality is you can use any CSS valid length unit like rem, em, px. Just remove the space.

7

This may help.

8

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