Adding Text


In Flexitive, there are 2 different ways to add text to your design. They are:

  • Adding a text box to use web fonts
  • Uploading an image of your text


Adding a Text Box to use Web Fonts 


You can add text to your design by adding a text box to your canvas. To add a text box, click on the Add Text option on the left-hand side of the editor.



After clicking on the ‘Add Text’ option, a text box will be placed on the canvas. You can double-click on the text box to enter the text settings to style the text and edit the text.


Using a text box will use web fonts, which have a couple of key advantages, such as:

  • Web Fonts are very light on file size and are not compressed when exported
  • Web Fonts are very flexible and can easily be edited inside Flexitive, and are perfect for scaling to many different sizes of design
  • Web Fonts can be set up to have a scrolling option, which is perfect for large blocks of text
  • Web Fonts will scale better to new aspect ratios when building a responsive design


When using web fonts, it is important to remember that they are rendered in the browser they are displayed in. Since browsers are not built the same, and not necessarily under the same specifications, very small variations between browsers may occur with web fonts. For more information on this, check out our article on Why Web fonts Look Different in Different Browsers.


In Flexitive, you will have access to over 900 free web fonts through Google Fonts. There will, however, be times that the font you need is not available by default. At these times, you can either:

Text as Images 


To add text to your design as an image, simply save your text as an SVG or PNG and then upload the image to your Assets panel. From here, you can treat this text as you would any other image in Flexitive. The file type that you use for your design will vary depending on your needs. 


SVG images are not compressed when they are exported from Flexitive and are usually the best option for text styling when the text will be very fine. Usually, SVGs have the lowest file size, while also providing the best image quality for text. When uploading your text as an image, we recommend using an SVG file. 


PNG images compress on export and can contain transparency. In some cases, if the text in the design contains a lot of intricate detail, PNGs may have a lower file size than SVGs.

Using an image as text has a couple of key advantages, such as:

  • If you need a custom font, you will not need to upload it to Flexitive
  • The text will look the same across every browser and operating system
  • Images do not make 3rd party calls for font files


It is important to remember that using images for your text will have a larger file size than using a web font. Additionally, scaling an image of text into multiple sizes can be more difficult than with a web font, since the layout for text in one size is not necessarily going to match the layout that you need for the second.


Check out the following articles for some helpful information on working with text in Flexitive;