Use your own Fonts

Table of Content

• Step 1 : Get the custom font on your server
• Step 2 : Apply on text layer
• Step 3 : Enable the custom font selection in editor

Step 1

For this example, we’ll use the Open Sans font from FontSquirell. After visiting that link, click the Webfont Kit tab, and then click the Download @font-face kit button:

Next, unzip the downloaded file, and then open the html file named How_to_use_web_fonts.html, and review the information in this document.

Next, click the download’s webfont folder, and then click on the opensans_bold_macroman folder. Inside this folder, you’ll see the following font files:

Next, using an ftp program, upload the fonts to your website. For this example, we’ll create a new directory called webfonts inside the wp-content directory. So the fonts would be uploaded via ftp here:

wp-content/webfonts/

Next, open the “stylesheet.css” file in a text editor:

and modify the urls to be absolute, so they’re loaded from the wp-content/webfonts/ directory. Here’s an example:

@font-face {
    font-family: 'open_sansbold';
    src: url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot');
    src: url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
 
} 

Step 2

To officially apply the font to one of your Text Layers, select the Layer on the editing stage and then add a unique class inside the Attributes section.

Step 3

Navigate to Global Settings and locate the “Enable custom font selection in editor” option