ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Styles / CSS styles
  • Overview
  • How to?
  • Managing fonts
  • Creating a set of fonts
  • Importing a font
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
The browser support the most common fonts by default: Arial, Verdana, ...
WEBDEV gives you the ability to use custom fonts that differ from the ones proposed by default.
How to?

Managing fonts

When creating or modifying a style, you have the ability to select a font among the standard fonts.
You also have the ability to select new fonts. These fonts can come from:
  • the development computer (these fonts have been installed on your computer in Windows).
  • a download operation (downloaded Google fonts for example).

Creating a set of fonts

To add a set of fonts:
  1. Open the window for managing styles ("Style" tab of control description).
  2. In the "Fonts" area, click the "..." button:
  3. The window for font management is displayed.
    This window presents the existing sets of fonts.
  4. Click "New" to create a new set of fonts.
  5. In the wizard that starts, you must select the different fonts that make up the set of fonts.
    You can:
    • select a downloadable font. This font will be automatically downloaded to the user's computer.
    • select a system font, which will only be displayed if it is installed on the user's computer. If this option is selected, you must then select the desired font.
    • select a generic font, which will be available for all browsers.
      Remark: This type of font is mandatory in a set of fonts. Thus, the text will be displayed regardless of the user's computer.
  6. Select the desired font type and then the font to be added to the set of fonts.
  7. The window with the different fonts of the set is displayed.
    You can:
    • Add a new font (). The wizard starts again.
    • Delete the selected font ().
    • Change the order of the fonts (using the arrows ).
  8. Validate the window for creating the set of fonts.
  9. Validate the window for managing the sets of fonts. The selected set of fonts is applied to the current style.

Importing a font

To import a new font:
  1. In the window for managing sets of fonts, click "New".
  2. In the wizard that starts, select "Downloadable font". Go to the next step of the wizard.
  3. In the window that appears, click "Import a font".
  4. The font import wizard starts.
  5. Select the mode for importing the font:
    • Import a Google Web Fonts font:
      • The wizard proposes the list of Google fonts to import.
      • Select the requested fonts. You have the ability to view a sample of the font by double-clicking its name.
      • Validate. The fonts are downloaded and installed on the current computer.
    • Import a font from files: The wizard allows you to select the files corresponding to the different formats of the font:
      • True Type file
      • Embedded Open Type file
      • Web Open Format file
      • Scalable Vector Graphics file
      • Validate. The selected fonts are installed.
Remarks:
  • Make sure that the files used for the fonts are free of rights or that you have a license allowing you to distribute them.
  • If you import a font and create a set of fonts, the files corresponding to this font are copied into the "<Project_name>_WEB\Styles\fonts" subdirectory. Therefore, they will be automatically taken into account when installing the site.
Caution: Set of fonts containing imported fonts:
Before using a downloaded font, it must be integrated into a set of similar fonts.
If the set of fonts contains only the downloadable font, the following case may occur: if the font is not found on the browser:
  • the Times font is displayed by default while the requested font is downloaded.
  • if the font cannot be downloaded, the Times font is still displayed.
To avoid displaying an unwanted font, it is advisable to create a set of fonts containing the following elements:
  • the fonts to download,
  • one or more substitution fonts corresponding to the fonts of main systems,
  • one or more fonts corresponding to the most common fonts,
  • the associated type of font families. The list of types of font families is as follows:
    • "cursive": handwritten style,
    • "fantasy": like Impact,
    • "monospace" like Courier,
    • "sans-serif" like Arial,
    • "serif" like Times.
If the first font is not found, the first one found in the list and on the computer will be used.
Example: The following set of fonts is defined: "Open Sans, Segoe UI, Arial, Helvetica, sans-serif". If the "Open Sans" font is not found, the "Segoe UI" font will be used, otherwise the Arial or Helvetica font will be used. These fonts are well-know fonts to have correct alternatives. If these two fonts are not found, the first available font without serif will be used.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 05/31/2023

Send a report | Local help