How To: Use Custom Fonts in a Portal Text Editor (PTE) Island

To add custom fonts that you can download and add to the portal for use in Portal Text Editor (PTE) Islands, you must first find and download the font you'd like to use. 

http://www.1001freefonts.com/ is a good resource for some interesting fonts, and this is what I used to grab a font to use for this walkthrough! 

Once you have your font file (usually a file type like a .ttf - 1001freefonts are usually inside a .zip file, so they would need to be extracted) - just move the font file to the root of your Portal on the server. You also can use other locations such as if you decided to upload it to your Portal Documents!

Within your PTE, if you go to HTML view, add in some space at the very top and add in this:

<style>

@font-face {
font-family: hammerhead;
src: url(http://resource5.passageways.com/hammerhead.ttf);
}

</style>

You can then edit this to reflect to font you're adding.  The @font-family is the name you will want to use for the font. Something simple is usually good. Since I'm using the HammerHead theme from 1001freefonts.com I name it hammerhead.

The URL should be changed to wherever you put your font file.  Mine was in the root of my portal, so I could just use my portal URL with /hammerhead.ttf at the end.

Now, in your PTE, you can find where the text is you want to change, and if it is in a <span> <div> or <p> frame you can use the fonts by adding a style="font-family:hammerhead;" to that element.

Example:

If I had a <span> that already had some styling done to it, it could look something like this:

<span style="font-family:hammerhead; color:#ff0000; background-color:#ffffff; font-size:20px;"> HammerHead Example </span>

Which would give you:  

You could also the @font-face declaration to your Theme's CSS file to make it possible to use the custom font on any page you have a PTE Island you'd like to use it on!