Font manager

Nextend font manager allows you to easily change the font settings in our extensions without any CSS editing. Most of its features are very intuitive, but there are some advanced features what need to be explained. You can recognize a font manager by the following image:

After you click on the Font button, you will see a window like this:

Font manager window


One font manager can contain font settings for different “actions” or “behaviors”. In each font manager, the tabs are depend from the current context, so in some place, there will be only one tab, but if required, there can be four too. In my example, there is four tabs and each define the different states of the current font settings. In this case, you can set simple text color on Text tab, active color on the Active tab, etc…

The first tab is always the master tab, which means that the other tabs are inherit the settings from it, if something not defined in the other three tabs. The following animated image shows this behavior, I have added underline to the hover state of the text. Other tabs are not inherit the underline setting as it made only on the Hover tab:

Font manager tabs

Reset tab

When you are not on the master tab, there is a button below the font preview, which allows you to reset the custom font settings of the current tab. After you click on it the current tab will inherit the settings from the master tab. You can see this button in the previous animation when I am on the Hover and Link tabs.


Here you can specify font families, what you would like to use as the current font. The families can be widely used in-built operating system fonts, like Verdana or Arial, but you can use custom fonts, which are loaded from your template. Also in this field you can load custom Google fonts too.

Google fonts

Example code, which loads Bold PT sans with Arial fallback font. You can copy and paste this line into the Family field in the font manager.

google(@import url(;),Arial

Google Web Fonts directory offers you a lot of great, high quality fonts. After you found your chosen-one in the Google Web Fonts directory, click on the Quick-use button, choose the style and character set what you need and then hit the @import tab, which will show the code what you need to use. Just copy that code into:

google(Here comes the copied code),Arial
Extra character set

When you browsing the Google webfont directory, then you can click on the ‘Quick use’ icon, where you can see the necessary check box:


Allows you to change the font color. Please notice that the color supports RGBA, which helps you to define text colors with opacity.


Font size can be in pixel or em. Usually it depends on the structure of your template.

Line height

This value defines how much space do you have between the lines. The default value is “normal”, but it can be any pixel or em value too.


You can switch bold, italic and underline in this setting. Google fonts note: it is not enough to set bold in our font manager, you should copy the code for the “bold style font” into the family field.

Padding left

If you write a pixel value in this field then it will transition for the actual state.

Text align

As usual, all four text align is available: left, center, right and justify.

Text shadow

It is a CSS3 parameter, which helps you to display your text in a more readable way. If you set the first, second and third parameter to 0 the shadow will be disabled.

  • First parameter: horizontal offset of the shadow
  • Second parameter: vertical offset of the shadow
  • Third parameter: blur of the shadow
  • Forth parameter: color of the shadow

Background color

This color is located in the right bottom corner in the Font Preview. It only changes the background color for the preview window to help you customize the font with the right background where it will be display. (So this background will not be displayed on the client side. Also it is not saved!)

Use of your own fonts

If you have a font in your ftp, then you can use that by putting a font-face into your themes/templates style.css, or into some css file, which is loading in your frontend. These are usually not loading in the backend, so always check the frontend, if it’s working fine. The css code, which you can use is this:

     font-family: ExampleFont;
     src: url('');

Change the src to your font’s link, and the font-family to something better, and then you can write ExampleFont or your font’s name into the font family.