Adding fonts to your Backlight site

The thing about fonts on the web is that if your website is using a special font and you didn’t embed that font in your site, then your visitor may or may not see your font. It depends on if the font is already installed on their computer. The way to make sure that they see the font you want them to see is by including the font itself in your website.
Backlight comes with an easy way to add Google Fonts.

But what if you have purchased some fonts elsewhere and wish to use them. Or you have a font on your home system that you wish to use (and have the rights to use)?

First, let’s tackle the purchased font options. If you already have the font on your system, jump here.

You buy fonts from a site like MyFonts and their instructions tell you how to install the fonts on your system and how to use them. Usually it’s a matter of uploading a folder and a css file. The instructions might tell you to put both the folder and the file in the root of your site. For Backlight, don’t do that, it won’t work. (this is due to the nature of how Backlight handles files in the root.)

Instead, create a new folder to store the assets. You can put it in the root of your site but a prefered place would be inside the /backlight/custom/ folder. It’s always a good idea to place any custom assets there.

The reason I suggest placing them in your custom folder is that it’s one of the two folders in Backlight that you should absolutely be backing up. (See the TTG documentation on backing up.)

So let’s say you’ve created a folder named “fonts” in /backlight/custom/ folder. Upload your assets to this folder. For MyFonts, it’s a folder named “webfonts” along with a css file named MyFontsWebfontsKit.css.

Now you need to make the fonts available to your site. You do that by inserting a reference to the css file that calls the fonts into the <head> tag of all the pages in your site. Use phplugins to do this. Make sure all your page templates (if you have more than one) are using the same phplugins file.

Here’s the function. It assumes that the font package is in the /backlight/custom/fonts/ folder and uses MyFonts as an example.

function head() {
echo ‘
<link rel=”stylesheet” type=”text/css” href=”/backlight/fonts/MyFontsWebfontsKit.css”>
‘;
}

This also assumes that you’ve installed Backlight in the root of your site (or subdomain) and not a sub-folder. If it’s in a sub-folder, you’ll need to add that folder name in the path to the css file. For example:
/sub-folder-name/backlight/fonts/MyFontsWebfontsKit.css

That should take care of installing the fonts.

Using your font

There are a number of ways to use your font. The easiest is to use the font site-wide.

In the Typography section of your page template under Base Font Properties, enter the name of your font in the Prepend Font-family w/ field. This will make it so all the standard text on your site uses the new font. In the Font-Family drop-down you should also be choosing a font-family that has similar properties as the font you’re using. These will serve as backups just in case.

If you want other text elements to use the font, scroll on down to the Heading Font Properties section and do the same thing.

Or, if you have another font to use for the headings, enter that instead (assuming that you’ve installed it).

If you want to use the font as an emphasis, just a few words a time for instance, then write your text in html and include the font with inline styling:

<p>This is regular text, using the site’s default font. <span style="font-family: your-font;">This is the text that uses your cool new font.</span> And now we’re back to the site’s default font.</p>

You can use that technique anywhere in your page copy. But if you plan on using that font in the same fashion multiple times, then the easiest way to do it is using custom css.

<p>This is regular text, using the site’s default font. <span class= "special-font">This is the text that uses your cool new font.</span> And now we’re back to the site’s default font.</p>

In custom css you’d need to add this:

.special-font {
	font-family: your-font;
}

If you always want it in a different color, or italicized, you can add those properties to the class:

.special-font {
	font-family: your-font;
               color: #FFA500;
               font-style: italic;
}

CSS colors: https://www.w3schools.com/cssref/css_colors.asp

You already have a font you want to add

This is for when you already have the font files and you want to use the font on your site.

First, upload all the font-files to the /backlight/custom/fonts/ folder you created.

Generally, you’ll need the font in the following file formats, depending on the browsers you want to support:
.ttg, .woff, .eto, .svg

You then need to use the @font-face rule in your custom css.

Something like this, you may need more or less. See this article for more: https://css-tricks.com/snippets/css/using-font-face/

@font-face {

font-family: 'YourFont';

src: url('/backlight/custom/fonts/YourFont.eot'); /* IE9 Compat Modes */

src: url('/backlight/custom/fonts/YourFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('/backlight/custom/fonts/YourFont-Regular.woff') format('woff'), /* Modern Browsers */

url('/backlight/custom/fonts/YourFont-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */

url('/backlight/custom/fonts/YourFont-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */

}

Of course, replace YourFont with the actual name of your font.

Now simply use your font as described above.

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight 2 Versions

See the Backlight Modules page on your site for latest Backlight and module versions and changelogs.

TTG Publisher 4.0.7

Backlight 1 Versions

Backlight 1.2.3 (release 5)
Pages module 1.2.3
Cart Add-on 4.1.6
Client Response Add-on 7.1.2
Theater Add-on 1.2.5
Galleria Add-on 1.0.0
WordPress Add-on 1.2.5
Publisher 3.2.3

CE4 Versions

note: CE4 is no longer being developed or sold. See this post.

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.10
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts