Step 1. Upload and manage your fonts

Get started by logging in to upload and mange the fonts you want to display on your web pages.

Note: Fonts will only be rendered for domains you grant access to and where the font-family exactly matches an entry in your uploaded fonts list.

Step 2. Include the rendering engine script in your page

This small javascript will transform any identified content tags in your web pages with rendered images using your uploaded fonts.

<!-- The rendering engine uses the JQuery javascript framework. 
We recommend you install this on your site or get it directly from the Google CDN as shown here -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- The rendering engine itself can be hosted on your site or obtained
directly from RenderedFont as shown here. Note that this script requires an account id to access your fonts -->

<script type="text/javascript"  src='http://cdn.renderedfont.com/js/renderedfont-0.8.min.js#your-account-id'></script>

Step 3. Style your fonts using regular CSS

Use your custom fonts in the CSS markup just as you would any other font for the elements you intend to render, for example;

h2 {
  /* "Scriptina" isn't a standard font, but if it's uploaded to your account it will render for any tag identified with the "renderedFont" class, otherwise it will default to the next supported font family */
  font-family: "Scriptina", "Comic Sans MS", "cursive";
  /* Other styles are defined or inherited as normal */
  font-size: 20px;
  color: #080;
  background-color: #fff;
}
        

For additional styling options such as rotation, offsetting, hover effects and multi-line rendering see the examples page.

Step 4. Identify the HTML tags to render

Finally, tell the rendering engine which tags to render by adding the "renderedFont" class to those tags.

<!-- Inherit the h2 style from Step 3. above -->
<h2 class="renderedFont">A rendered title</h2>

<!-- Or directly style a tag.  -->
<p >... some unrendered text with <span class="renderedFont" style="font-family: Scriptina"> in line rendered font</span> back to normal text ...  </p> 
        

 

If you have any problems please have a look at the examples page, leave a comment below or shoot an email to