Tutorial
Using Fontdeck on your website
This tutorial assumes that you have set up a website with Fontdeck and that you have access to edit the markup and stylesheets of your website, and that you have a basic knowledge of HTML and CSS.
If you haven’t already set up your website with Fontdeck you can register now – it’s quick and free to try!
Quick setup
Implementing Fontdeck fonts on your website can be achieved in three straightforward steps.
Step 1: Add your domains
Log in to Your Account and click on the website you’re setting up. On the website settings page, under Domains, enter the domains your website uses. If your website can be accessed with and without the www, make sure you enter both domains (eg. example.com and www.example.com).
Step 2: Link to the fonts
Scroll down to Using the fonts on your website.
Recommended method
If you are using the recommended method, you need to paste the <script> block somewhere into your page. You might choose to add it just before the closing </head> tag. It’s worth noting that all CSS should come before this <script> block.
The script block will look something like:
<script type="text/javascript">
WebFontConfig = { fontdeck: { id: 'XXXXX' } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>Ensure that the project ID for your site is included instead of XXXXX.
HTML method
If you are using the HTML method then the following applies to you instead.
Copy the <link> tag and paste it between the <head></head> tags of your webpage. Ensure you paste the <link> tags before any <script> tags, otherwise Internet Explorer won’t render anything in the page until the font files are downloaded.
You need to replace DOMAIN_NAME with the domain you are working on (example.com is highlighted in the following code sample).
<link
rel="stylesheet"
href="//f.fontdeck.com/s/css/wMErktaKFxpwhaGE/Bm0r6zK5/example.com/XXXXX.css"
type="text/css"
/>If you are using a server side language like PHP, you can ensure the correct <link> is served for each domain when the page loads. It might look like this:
<link
rel="stylesheet"
href="//f.fontdeck.com/s/css/wMErktaKFxpwhaGE/Bm0r6zK5/<?php echo $_SERVER['SERVER_NAME']; ?>/XXXXX.css"
type="text/css"
/>Step 3: Define which fonts are used where
In your style sheet you now need to define which bits of text should use which fonts. You do this by applying the required font-family to the appropriate selectors. The second textarea on the website settings page contains a series of CSS rules; one for each of the fonts you have specified. These take the form:
div {font-family:"Syntax Heavy", Verdana, sans-serif;}Paste the rules into your style sheet and replace the div with the selector(s) you require. For example if you want all text in paragraphs to be rendered in Reader Regular then you would add this rule to your style sheet:
p {
font-family:"Reader Regular", Arial, Helvetica, sans-serif;
}If you also want all your headings and strongly emphasied text to be rendered in Reader Bold then you would add this rule:
h1,h2,h3,h4,h5,h6,strong {
font-family:"Reader Bold", Arial, Helvetica, sans-serif;
}Taking this a little further, any strongly emphasied citations may need to be rendered in Reader Bold Italic. If so you would add this rule:
strong cite {
font-family:"Reader Bold Italic", Arial, Helvetica, sans-serif;
}And that’s it. Refresh your browser and enjoy your new fonts!
Preventing a “Flash of Unstyled Text” (FOUT)
If you are using the recommended method and don’t want any text to appear whilst fonts are being downloaded, you can use the following CSS:
.wf-loading body {
visibility: hidden;
}
The class wf-loading is applied when the fonts start downloading. If you want it to happen sooner, use the following script instead, replacing XXXXX with your project ID.
<script type="text/javascript">
var html = document.getElementsByTagName('html')[0];
html.className += ' wf-loading';
setTimeout(function() {
html.className = html.className.replace(' wf-loading', '');
}, 5000);
WebFontConfig = { fontdeck: { id: 'XXXXX' } };
(function() {
var wf = document.createElement('script');
wf.src = 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
The timeout of 5000ms (5 seconds) ensures that your text appears after 5 seconds if fonts are taking longer than this to be downloaded. Without setting this timeout, there is a risk that text may never appear.
If you want to learn more about the classes added during font loading, please take a look at Google’s WebFont Loader documentation.
Website Settings
Taking your website live
By default all new websites set up on Fontdeck are created in Development mode. Development mode is good for trying out Fontdeck, testing new fonts and developing sites for clients, as it allows you to use all fonts for free. However those fonts will only be visible to visitors from 20 unique IP addresses, including this computer and any other computer you use to log into Fontdeck.
In practical terms this means that, in Development mode only you, your colleagues and your client will see the fonts you are trying out. Upgrading to Live mode enables all visitors to see the fonts on your website, thus you will need to upgrade once you’ve finished testing. When you upgrade your site to live use, you’ll be asked to buy an annual license for each font.
Adding extra domains to your website
When you initially set up your Fontdeck website, you specified the website domain (the address of the website, such as example.com). Many designers require more than one domain, perhaps for local testing or remote staging for client review. Each domain must be specified for Fontdeck web fonts to work. You can update the website domains list on the website settings page in Your Account.
Turning off forced italic or bold
Some HTML elements have predefined font styles. For example the <h1> element is bold by default and the <cite> element is italicised. Browsers will try to mechanically embolden or italicise these elements, thus altering any font you may have set. To prevent this happening, and ensure your Fontdeck web fonts are rendered correctly, we recommend you reset the font-style and font-weight on affected elements. Based on the preceding examples you would add this rule:
h1,h2,h3,h4,h5,h6,strong,cite {
font-style: normal;
font-weight: normal;
}If you are already using a reset style sheet such as the Meyer Reset then you don’t need to add these rules as they are already being applied.