Getting Started

Making TypeShow run on your server is quick and easy with our automatic installer script:

  1. Download the the automatic installer package from
    http://update.typeshow.net/typeshow.installer.zip
    Please make sure your server meets these standards.
  2. Unzip the file and create a directory named (for example)/ts/, and make sure it is temporarily writable for the server.
    Place the unzipped install.php into /ts/.
  3. Open your browser and navigate to
    yourdomain.com/ts/install.php.
    Let the install wizard guide you through the setup process.
  • Please note that the user name you are setting is case sensitive.
  • Right after setting your user name and password, TypeShow should ask you to log in before showing the admin interface. If you are not asked for your user credentials, something went wrong and your TypeShow installation is not password protected. In this case, please ask your administrator to enable http-auth for your server.
  • If you would like to check out the source code or if you need to install the package manually, you can download the full source code here. This is the exact package that the automatic installer downloads. Please note that you need to set up .htaccess password protection (http-auth) for /admin/ and /resources/ manually if you do not use the automatic installer.
  • For developers only: Find the latest source on GitHub/Raureif/TypeShow/

Managing your TypeShow

To add and edit fonts and themes, navigate to yourdomain.com/ts/admin/.

Automatic Saving: Whatever you do in the admin area will be saved instantly, and you can see the result by hitting the Preview button in the upper right corner. However, your changes will not be visible to your website visitors until you klick Publish.

Your font files: OTF (PS/CFF) files do not work very well on most servers. For best results, please generate TrueType fonts with a flat kerning table.

Putting the widget on your website: The TypeShow widget is a jQuery plugin. To integrate TypeShow with your website, please copy these code snippets in the appropriate places:

1. Between <head> and </head>:

<link rel="stylesheet" media="screen, projection" href="/ts/css/typeshow.css" type="text/css" />

<script src="/ts/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/ts/js/jquery.typeshow.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
		$("#typeshow").typeshow({
			"folder" : "ts"
		});
	});
</script>

2. In the <body>, at the place where TypeShow will live:

<div id="typeshow"></div>
 

Troubleshooting

Please check our FAQ section!