EverWeb Codebox

Custom Headings

Headings Using Non Web Safe Fonts

The layout section of this site described the use of HTML headings and Google/Self Hosted fonts. This is about combining the two techniques to create custom headings.

The h1 in the header of this website uses a Google Hosted font - Handlee.

To get a particular font, go to Google Fonts and enter the font name into the search box at the top left.

Click the "Quick Use" arrow button which is to the left of the blue "Add to Collection" button.

On the next page, take note of the effect the use of the font will have on your page load time!

Go to section [3] and copy the code which will look like this...

<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>

Where you paste this code will depend on whether you want the font on just one or two pages of the site or on most, or all, of the pages.

For use on one or two pages, paste it into the Head Code box in the page inspector of every page where it is to appear. To be able to use the font on any page of the site, paste it into the site wide Head Code box in the Site Publishing Settings page of EverWeb.

HTML & CSS

The HTML for the various sizes of heading is shown on THIS page.

If the heading is an h1 which will be used in the header of every page of the site, the styles should be written as internal styles and pasted into the Head Code box in the Site Publishing Settings page...

<style type="text/css">

h1 {

     font-family: 'Handlee', verdana, sans-serif; /* font family, fallback font and generic group */

     font-size: 32px; /* font size */

     color: #0593FF; /* font color */

     text-align: center; /* text align would be either left or center */

     margin: 0; padding: 0;

}

</style>

Inline Styles

For occasional use, the styles can be inline in the HTML like this...

<h1 style="font: 32px 'Handlee', verdana, sans-serif;color:#0593FF;text-align:center;margin:0;padding:0;"> Heading Text </h1>

Self Hosted Fonts

Fonts can be downloaded - free and paid - from sites like Font Squirrel.

Create a "fonts" folder, drag the individual font folders into this and upload it to the root folder on the server. The root folder will normally be the one which contains the index.html file for the website.

Each font folder will have a stylesheet which is normally named "stylesheet.css". This is the file which is referenced in the code.

This code needs to be pasted into the Head Code box of every page of the site which uses that particular font. If it is required on most, or all pages, insert it into the site wide Head Code box in the Site Publishing Settings page.

<link rel="stylesheet" href="htp://www.domain-name.com/fonts/font-name/stylesheet.css" type="text/css" charset="utf-8">

Hosted Fonts & Relative Paths

A major advantage to self hosting fonts is the ability to use relative URLs rather than absolute ones to reduce server requests and page load time.

If the font folder is in the root directory, the URL from any page will be…

font-folder/font-name/stylesheet.css

If the page using the font is in a directory the URL is…

../font-folder/font-name/stylesheet.css

More info about Relative File Paths at the bottom of THIS page.

Google Versus Self Hosted

Do NOT be tempted to use more than two or three Google hosted fonts on any website and NEVER use them on the mobile version of a site. The Google Fonts website has a very useful load indicator which shows how much the use of hosted fonts slows the page load time.

If a reasonable amount of the text on a website - particularly a mobile one - uses custom fonts, they must be self hosted and referenced using relative paths.