Help & Support
Category: Leave a Comment
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.
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.
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
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.
- 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.