EverWeb Widgetbox

Outline HTML Heading Widget

Outline

Heading

Outline Heading Using Google Fonts & Multiple Text Shadows

The headings use Google hosted fonts and the outline is created using CSS to create four shadows with different offsets. The end result will depend on the chosen font.

It's better to stick with fonts from the sans-serif group although others may work out OK. Serif fonts don't work too good at all!

If a web safe font is required, leave the font box empty and chose from the list of websafe fallback fonts.

The heading example shown above uses "Russo One" for the first word and "Days One" for the second. They are both set to h2 since the website name in the header is an h1.

See THIS page for more info about how to use HTML headings and why they are very important for SEO.  

Widget Settings

Enter the heading text and select the headingtype.

Enter the name of the Google hosted font.

Select a suitable fallback font.

Set the font size, color and weight.

Change text transform to none if uppercase is not required.

Set the outline width and color.

Adjust the letter spacing as required.

Outline Heading Widget
Get The Widget