# Styling text, headings and seo

**URL:** <https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537>\
**Category:** RapidWeaver Classic\
**Created:** [February 23, 2016, 1:47pm UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537 "2016-02-23T13:47:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jochenabitz](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jochenabitz/32/27126_2.png) [@jochenabitz](https://forums.realmacsoftware.com/u/jochenabitz)\
**Post date:** [February 23, 2016, 1:47pm UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/1 "2016-02-23T13:47:32Z")

</div>

If i build my websites i always have an eye on seo. An well organized website structure with headings in the right order is mandatory today.  
But if i use a hero title page, i often have only one or two words in it. If i turn off the site title and slogan in my website, this has to be H1 regularly. Not the best solution…

And if i use some text for “styling” some parts of the site, i don´t want to use headings because this would be the wrong meaning for google. Using a paragraph stack, i am limited in the text size and formatting (ParagraphPro is wonderful new stack!)…

How do you style your text? Is there a better way?

thanks.

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [February 23, 2016, 9:38pm UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/2 "2016-02-23T21:38:03Z")

</div>

@jochenabitz  
I’ve just released an update for Header Pro for you.  
You can now select the tag as a `div` in addition to `h1..6` and thus use all the styling features, scaling etc without it being marked up as a header.  
v1.0.1 is now available via the stacks updater.

---

<div class="post-metadata">

**Author:** ![thang](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thang/32/303_2.png) [@thang](https://forums.realmacsoftware.com/u/thang)\
**Post date:** [February 24, 2016, 5:41am UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/4 "2016-02-24T05:41:39Z")

</div>

@tav  
Is it possible to have italic text in Header Pro, perhaps with CSS?

Thanks!

---

<div class="post-metadata">

**Author:** ![jochenabitz](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jochenabitz/32/27126_2.png) [@jochenabitz](https://forums.realmacsoftware.com/u/jochenabitz)\
**Post date:** [February 24, 2016, 6:18am UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/5 "2016-02-24T06:18:57Z")

</div>

You are awesome! Great!

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [February 24, 2016, 7:23am UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/6 "2016-02-24T07:23:31Z")

</div>

> Is it possible to have italic text in Header Pro, perhaps with CSS?

It is possible yes, but first let me explain why I don’t make it a one click option.

By, italicising (or bolding) a font merely by using a bold or italic tag in the html (or a css style to do it) you will be asking the browser to _faux render_ that font.

What this means is that you have not actually got an italic variant of the font loaded and so the browser makes its best attempt at either slanting or making the existing font heavier. This always results in less than ideal rendering of the font with jagged edges to a greater or lesser degree.

The Pro stacks are all about quality typography and as such have full facilities for loading web fonts and even sub-setting Google fonts (Google Fonts are dubious when we are speaking about quality - but I’ll let that go for now).

So, if you want and italic header, then clearly you should use an italic font for it in order that it will display to the same quality as the rest of your page.

With all that said if you really want to force it to faux render then simply add a custom class (the very bottom setting). For example if you entered, `italic-header` as a custom class, you could then add the following CSS either to the page inspector or site-wide if required.

`.italic-header{ font-style:italic; }`

similarly `font-style:bold;` will make it a stage heavier.

So, there you go, typography rant over 😉 You can do it - but it is a low quality short cut and you should really make a small subset of the font to handle such situations.

---

<div class="post-metadata">

**Author:** ![jochenabitz](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jochenabitz/32/27126_2.png) [@jochenabitz](https://forums.realmacsoftware.com/u/jochenabitz)\
**Post date:** [February 24, 2016, 7:38am UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/7 "2016-02-24T07:38:30Z")

</div>

How about using an italic font (if available in google fonts, for example) and use an italicised font as a fallback? With an exclamation mark in the settings. 😉

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [February 24, 2016, 7:54am UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/8 "2016-02-24T07:54:41Z")

</div>

@jochenabitz I should add the option to load the italic variant of a google font loaded in Header Pro, just like Paragraph Pro does. To be honest I don’t know how it went missing from there in the settings - I’ve only just realised that.

Obviously the same warnings as I mentioned previously apply if the font does;'t actually exist in italic form.

---

<div class="post-metadata">

**Author:** ![thang](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thang/32/303_2.png) [@thang](https://forums.realmacsoftware.com/u/thang)\
**Post date:** [February 24, 2016, 4:02pm UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/9 "2016-02-24T16:02:22Z")

</div>

Thanks @tav. Makes perfect sense. I just couldn’t figure out how to set the italic variant for a google font and wondered if i was overlooking a setting in the stack controls. These are truly remarkable stacks - a giant leap forward for RW!

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [February 25, 2016, 1:48pm UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/10 "2016-02-25T13:48:09Z")

</div>

@jochenabitz @thang I’ve just had a chance to check and the option is actually there already!

![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/7/703308123d9ded22cc0bbd770dc69a390c8779cb.jpeg)

I will however be removing the bold setting from that drop down as it is not appropriate for headers and should not have been left there for google fonts. The "boldness’ is controlled by the font weight of the available fonts.

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [February 25, 2016, 2:16pm UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/11 "2016-02-25T14:16:05Z")

</div>

@jochenabitz @thang  
Further update - the reason that you can’t see that control is that I have mistakenly enabled it with the Segment 1 google font selection and not the the main google font selection.

When I tried it I had segment one enabled thus it appeared for me.

Fix coming in the next 10 minutes… sorry

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [February 25, 2016, 2:28pm UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/12 "2016-02-25T14:28:33Z")

</div>

@jochenabitz @thang  
Version 1.0.2 is now available via the stacks updater which fixes the lack of the Font Style selector.

Thanks for the heads up on this problem.

---

<div class="post-metadata">

**Author:** ![thang](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thang/32/303_2.png) [@thang](https://forums.realmacsoftware.com/u/thang)\
**Post date:** [February 25, 2016, 6:09pm UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/13 "2016-02-25T18:09:08Z")

</div>

@tav  
Thanks for the update Tav. Really looking forward to using this great stack.

---

<div class="post-metadata">

**Author:** ![scottjf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/scottjf/32/10385_2.png) [@scottjf](https://forums.realmacsoftware.com/u/scottjf)\
**Post date:** [February 26, 2016, 6:53am UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/14 "2016-02-26T06:53:38Z")

</div>

Hi, Thanks for a great stack.  
Header Pro looks like it could be very handy. I just have one question, how do I change the font selection. I have selected “Header Pro - Font” and changed for a test to Font Vault 1 but this has no effect on the font displayed. I tried with a few other settings too but the actual font displayed doesn’t vary from the theme font. Do I need to download another plugin or how do I actually change the font displayed. I’m testing on Tesla Pro theme same as BWD used on their site.  
Many thanks Scott

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [February 27, 2016, 12:34am UTC](https://forums.realmacsoftware.com/t/styling-text-headings-and-seo/5537/15 "2016-02-27T00:34:33Z")

</div>

@scottjf At the moment you can use Google fonts or web fonts that you host yourself - so pretty much anything you like. You can even load a web-font in one Header Pro stack (by selecting the “Load New” button) and then share it between all the others on the page (by selecting the “Existing” button) by using the name you give to it.

Font-Vaults are a setting ready for a new stack that will be released within the next couple of weeks. I can’t say more at the moment about it unfortunately but it will make professional font management super easy.

If you need any more help with fonts of any sort just email me via support [at] bigwhiteduck [dot] com
