In Flexitive, we have included the option to use Web Fonts to add copy to your designs. This allows for easier scaling and lighter file sizes.
In the Text & Fonts section, there are three major topics that are covered.
- The Text Editor
- Web Fonts
- Custom Fonts
In Flexitive, there are 2 different ways to add text to your design. They are:
- Using Web Fonts
- Using Images
Both of these options will work, but it is important to be aware of their benefits and limitations.
Text as Images
To add text to your design as an image, simply save your copy as a JPG, PNG or SVG and then upload the image to your assets panel. From here, you can treat this copy as you would for any other image in Flexitive. The file type that you use for your design will vary depending on your needs.
JPG images have the lowest file size and compress more than PNGs or SVGs. However, JPG images cannot contain transparency. For this reason, JPG images are usually perfect for CTA buttons and fonts with a solid colour backing.
PNG images compress less than JPG images and can contain transparency. They also will have a lower file size than SVGs for fonts with intricate designs.
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.
Using an image as copy has a couple 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.
Using Web Fonts
Using web fonts is done by adding a text-box to your canvas. To do this, click on the Text option on the left-hand side of the editor.
After clicking on the 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 change the copy.
Using a web font has a couple 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 700 web fonts for free. There will, however, be times that the font you need is not available by default. At these times, you can either:
- Upload a Custom Font
- Use a similar font from Google
- Use an image file for your font