Banner Font from Mountains -> Climate

[lco]

Would like to use the Climate Theme but with the banner font from Mountains.

Is there a way to do that? Climate banner fonts are a bit simple.

Thanks

[willwood (William Woodgate)]

The Mountains theme is using the Playfair Display font face for the title and slogan within the banner region. This is similar to Times News Roman, but the lettering is a little tighter (more condensed) and the serifs are slightly longer. To use the same font face in Climate, you could add this line of code to your Custom Header, within the Site Setup or Page Inspector:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">

And add this block of code to your custom CSS field:

h1.hero-title,
h2.hero-slogan {
    font-family: 'Playfair Display', serif;	
}

If you want to make the site slogan italicised, add this too:

h2.hero-slogan {
    font-style: italic;
}

The above will give you something that looks like this:

It looks quite Mercedes-ish

---

Some people don’t like calling fonts from Google Fonts, due to the privacy concerns and the issue of Google being blocked in some parts of the world. To host the font yourself (which is perfectly legal to do for most open web fonts), the procedure I tend to follow is:

1. Find the desired font face on Google Fonts, using the search box. Example, Playfair Display.

2. Click to ‘select this font’ link or button.

3. In the dialogue / popup window shown for the font, copy the URL from the stylesheet call. Example, https://fonts.googleapis.com/css?family=Playfair+Display.

4. Navigate to this page in a new web browser tab.

5. Using the URLs provided for your Latin subset (Latin extended subsets are optional but recommended), copy the links into another browser tab to download the WOFF2 font faces.

6. Rename the font files to something more legible. Example ‘playfair-display.woff2’ and ‘playfair-display-extended.woff2’. Don’t delete the .woff2 file extension off the end - even if your computer does not recognise it or question if you want it added!

7. Upload the font to a directory on your webserver via (S)FTP or drag and drop it into the RapidWeaver 8 resources window.

8. Take the CSS code Google gave you in step 4.

9. Paste this CSS code into your custom CSS box.

10. Modify the links to the font files, to either the URL of the fonts stored on your server or added as resources in RapidWeaver:

    /* latin-ext */
    @font-face {
    font-family: ‘Playfair Display’;
    font-style: normal;
    font-weight: 400;
    src: local(‘Playfair Display Regular’), local(‘PlayfairDisplay-Regular’), url(%resource(playfair-display-extended.woff2)%) format(‘woff2’);
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face {
    font-family: ‘Playfair Display’;
    font-style: normal;
    font-weight: 400;
    src: local(‘Playfair Display Regular’), local(‘PlayfairDisplay-Regular’), url(%resource(playfair-display.woff2)%) format(‘woff2’);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

11. Continue (as before) to write the CSS code for the elements you want to target with this new font:

    h1.hero-title,
    h2.hero-slogan {
    font-family: ‘Playfair Display’, serif;
    }

Hopefully all should be working by this point. Repeat for any other embedded fonts you want to include.

Solutions do exist for doing this using free stacks too, but obviously these solutions will only work on a Stacks page - of no use if you want to target fonts somewhere else, like on a Blog or Fire Sharing page type. But for some people building sites exclusively using Stacks, one of the free font stacks might be a bit easier.

[Bazza (Barrie McDermid)]

@willwood - one of the most helpful members of the Rapidweaver community!