Separate Google Fonts for h1 and h2 headers?

Permalink Browser Info Environment
I am trying to use Montserrat for my h1 header and Source Sans Pro Light for my h2 header in my first block.

Nothing I have tried so far has worked.

Any suggestions?

I am brand-new to Concrete5. I am familiar with HTML5, CSS3, and Javascript. I really like some of the features of Concrete5 and I especially like this theme.

Thanks!

Mark

Type: Discussion
Status: New
SnowyMountainWeb
View Replies:
jordif replied on at Permalink Reply
jordif
Hi Mark!

Once you install the theme, if you open the Page Properties, you should see a set of page attributes called "Long Story Short Options". By default, there are two attributes that will allow you to use two Google Fonts: one for your headings (h1 to h6) and one for the body text.

For instance, you could select "Google Font (headings)" and enter "Montserrat". Then select "Google Fonts (body text)" and enter "Source Sans Pro". This way you would have "Montserrat" for all your headings and "Source Sans Pro" for the body text.

Now, if you need different Google fonts for H1 and H2, you'll need to change a few things.

First, I'd still use the page attributes to load the Google Fonts. Only thing you need to change if you want to use the "Light" version of "Source Sans Pro": instead of entering "Source Sans Pro", type "Source Sans Pro:300".

Next, go to Dashboard -> Themes -> Long Story Short Parallax -> Customize -> Add Your CSS, and paste the following code:

.slides-container h1 {
   font-family: 'Montserrat' !important;
}
.slides-container h2 {
   font-family: 'Source Sans Pro' !important;
}
.slides-container h3, .slides-container h4, .slides-container h5, .slides-container h6 {
   font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif !important;
}
.slides-container {
   font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif !important;
}


With this custom CSS, you're making sure that Heading 1 will use "Montserrat", Heading 2 will use "Source Sans Pro" and the rest of the text (headings 3 to 6 and body text) use the default font for the theme (Helvetica).


Hope this helps!

Jordi
SnowyMountainWeb replied on at Permalink Reply
SnowyMountainWeb
Thank you for your response.

That solved my problem perfectly.

I am really enjoying using this theme. Thank you for you quick and accurate response!

Mark
merasafar replied on at Permalink Reply 1 Attachment
merasafar
Hello,

I am also trying Google Fonts but without success. I don't see any tab marked 'Page Properties' but I can get something like what you describe via Dashboard > Attributes under the menu marked Pages & Themes.

I can see a box marked 'Handle' and a box marked 'Name' (screenshot attached). Which one does the font name go in? and is it with or without double quotes?

e.g. Source Sans Pro or "Source Sans Pro"

Thanks,
Sally
jordif replied on at Permalink Reply
jordif
Hi Sally,

this is where you should find the Page Properties:

http://www.concrete5.org/documentation/general-topics/page-properti...

(While you are logged in, hover over the "Edit" button that lets you edit your site, and select "Properties".)

Enter the font name without double quotes.

Also this tutorial might be of help:

http://concrete5.15robots.com/tutorials/getting-started-long-story-...

Please let me know if you have any further questions,

Jordi

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.