Help & Support

Help & Support

If you are stuck on how to handle the font files you have received from us or just need some guidance on how to incorporate the fonts into a web site, look in the appropriate section of this reference and see if the answer is there. Also check the FAQ section, then, if you are still having a problem you can use the Contact Us form for help.

Desktop Fonts
You may already be using a Font Manager on your desktop computer and we would recommend that you carry on doing so. Having many fonts in your systems’ ‘Fonts Folder’ can slow the computers operation especially if it is an older computer running an older version of the operating system. Using a Font Manager can help you to manage the number of fonts that are loaded at any time.
If you are not using a Font Manager then you need to install the fonts into the system. Depending on what system you have, you will need to follow these steps.

Microsoft® Windows® versions XP and above:
Open the system Fonts Folder which is found in the Control Panel (Control Panel > Appearance in Windows 7 or above). Then drag and drop the fonts into the Fonts Folder. Fonts will not appear in applications font menus until the application is restarted. It is a good idea to restart the system when fonts have been added. If you need further help you should read this Microsoft webpage which is a useful resource.

Apple® Macintosh® OS/X:
Double click each of the font files in turn and select ‘Install’, alternatively, on each font file, ctrl-click to display the context menu and select ‘Install’. Fonts will not appear in applications font menus until the application is restarted. It is a good idea to restart the system when fonts have been added. If you need further help you should read this Apple webpage which is a useful resource.

Web Fonts
How to add the Web Fonts to your web pages.

The font data is provided as a font CSS data file. The font files are added through the CSS files for your web site and accessed through the style definitions declared in the CSS files of your web site.

Use these instructions as a guide, if you are a web developer and know how to incorporate the data then please disregard this information and follow you own protocols.

Create a directory for your font CSS file.
Find the base CSS style sheet for your web site, it is usually called ‘style.css’.
Using an FTP program create a new directory in the directory of your base CSS style sheet and call it ‘fontdata’
Now copy the font CSS file into the new directory.

Create the reference in your base CCS style sheet
Open your base CSS style sheet in a text editor. You will probably need to copy it from your web site on to your computer.
At the very top of the file, on the first line (add some space with ‘carriage returns’ if you need to) add:
@ import url(“fontdata/fontCSSfile.css”);

Edit the font declarations in your base CSS file.
Include the font name of the web fonts you received from us into the font definitions. The name of the file is the same as the name of the font reference – e.g.
filename = fontCSSfile.css
font reference = fontCSSfile
It should look something like this:
body {
font-family: ‘fontCSSfile’, sans-serif;
font-size: 15px;
}

A ‘real-world’ example of ElisarDT Regular would look like the following.
First line in your base CSS file should be this:
@ import url(“fontdata/ElisarDTRegular.css”);

The font declaration for the ‘body’ tag in your CSS should look something like this:
body {
font-family: ‘ElisarDTRegular’, sans-serif;
font-size: 15px;
}

Calling the fontCSSfile from HTML.
It maybe that you do not have a seperate CSS file for your website. This maybe true for small or single web pages. This is how to use the fontCSSfile by calling it in your HTML header.

Using an FTP program create a new directory in the directory of your HTML file and call it ‘fontdata’
Now copy the font CSS file into the new directory.

Inside the header of your HTML document make the call to the CSS file with the line:
<link rel="stylesheet" type="text/css" href="pathto/fontCSSfile.css?family=fontCSSfile">

Next, define the style to call the font with something like:
<style>
body {
font-family: 'fontCSSfile', serif;
font-size: 15px;
}
</style>

This is the code for a single webpage that calls AppealDT and displays the text in blue with a drop shadow. Copy and paste the code into a new HTML document to see how the file works.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://dtptypes.com/fontdata/AppealDT.css?family=AppealDT">
<style>
body {
font-family: 'AppealDT', serif;
font-size: 48px;
color: #039DFF;
text-shadow: 5px 5px 5px #aaa;
}
</style>
</head>
<body>
<div>Calling fonts from CSS.</div>
</body>
</html>

The webpage should look like this: TestPage

ePub & mApp Fonts
Our Electronic Publication fonts for embedding in ePub documents are similar to our Web Fonts but are optimised for embedding. You can also use these fonts on desktop computers to enable you to build your publication. See the License Details for further information on how these fonts can be used.

Our Mobile Application fonts for embedding into mobile apps are also similar to our Web Fonts but these too are optimised for embedding. You can also use these fonts on desktop computers to enable you to build your app. See the License Details for further information on how these fonts can be used.

FAQ
Frequant Answers & Questions

  • The kerning of text on web pages seems to be inconsistent. How can I make sure that kerning is always applied?

The combination of System and Browser version will dictate if kerning is applied automatically. Firefox is fairly good at applying kerning in most cases but Chrome is more particular about turning on kerning by default.

To enable you to cover more instances of System and Browser version you should add some code to the base CSS file on your site.

p {
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
font-kerning: normal;
}

This will force the browser in most cases to turn on kerning if it is available in the font.