To edit the style sheet in Parallax Pro
- Go to Appearance > Editor
- Check to make sure you’re editing the Parallax Pro style.css file.
- Then place your cursor at the very top of the style.css text. Then press Ctrl + F on your keyboard to open your browser’s search box.
- Search for font-family.
There are 12 instances of font-family in the Parallax Pro style.css file. But the first 3 are in a dense block of code called normalize. You can ignore these first three instances. Which gives us 9 instances of font-family to change.
body
The first instance of font-family that we want to change is in the body section of the code.
When you find the body section of the code. Replace the line of code that says font-family with the font-family line of code you got from Google Fonts.
In my case I changed…
font-family: ‘Sorts Mill Goudy’, sans-serif;
To…
font-family: ‘Lato’, sans-serif;
Headings
After changing the font-family used in the body element, move to the next instance of font-family and change that. In Parallax Pro the next instance of font-family is in the headings section.
Once again replace the font-family used by Parallax Pro with the font-family you chose when you got your Google Fonts.
Keep searching for font-family
There are 12 instances of font-family in the Parallax Pro style.css file. We ignored the first 3. So that leaves 9 for us to change.
Each time you find an instance of font-family with your search tool, decide which of the two Google Fonts you would like to use. We got our Google Fonts in the previous video.
Some important elements in the Parallax Pro style.css file
There are some elements that you are likely to want to change.
body (the main body text and paragraph text)
- Headings h1, h2 etc.
- .site-title (the main website title in the top left of your site)
- .entry-title (the main post title uses the font-family set in the body element, but you can paste any font-family code in here if you wish to change it)
- .genesis-nav-menu and .genesis-nav-menu a (the font-family used in the navbars)
- Pagination is the next and previous links you see at the bottom of blog listing pages.
Some extra tweaks
After changing the font-family settings I wanted to make a few extra small changes.
In Typographical elements
body
- I changed the color of text to #222 (NOT background color!)
- I changed font-size to 20 instead of 22
- And I changed the line-height to 1.75
Font Weight in Parallax Pro, an important point!
A font-weight of 400 is considered normal and is used throughout the Parallax Pro style sheet. If your Google Fonts used a heavier or lighter font weight, you will need to change the font weight settings in your code. Just search the style.css file for font-weight and make your changes. If your Google Fonts use a font weight of normal 400, you can ignore this step.
The Sidebar text
I wanted to make the text in the sidebar smaller so it didn’t distract readers from the main web page copy. I used a simple code snippet to do this. I’ve pasted the code snippet here…
Just paste this code snippet at the VERY bottom of your Parallax Pro style.css file.
These are the slides I used in the video. Click one to view full size.
