Avoiding Faux Browser Styles

Using 'Style Builder' it’s easy to assign a custom font to one or more text components.

However, if content using a custom font is styled as bold, italic, or bolditalic) and the font family does not include a bold or italic font, some browsers will compensate by trying to create the bold and italic styles themselves.  This effect is known as ‘faux browser styles’ and results in an awkward imitation of the real typeface.

Saying ‘No’ to faux browser styles

If you have access to the bold or italic versions of your chosen font (and they have been enabled), it’s advisable to avoid these faux styles by setting the correct font styles for each of the possible states.  This ensures the design of your content is never compromised and it will display perfectly across all devices. 

To find the names of fonts

1. Navigate to 'Publication Settings'.
2. Select Fonts.

3. From the list, note down the names of the font variations you wish to add.  For example, 'Aleo-Bold', 'Aleo-Italic' and 'Aleo-BoldItalic'.

   

   
   

How to set the correct custom font

1. Open the style required.
2. From 'Style Builder', select the text component you want to customise.
3. Click the Custom CSS Editor button.  The ‘CSS Editor’ window will appear.
4. Select the All tab and apply the required rules (see below).
5. Click Apply and save the style.

p b {
    font-family: Aleo-Bold;  /* Bold font */
    font-weight: normal;
  };

  p i {
  font-family: Aleo-Italic;  /* Italic font */
  font-style: normal;
  };

  p b i {
  font-family: Aleo-BoldItalic;  /* Bold Italic font */
  font-weight: normal;
  font-style: normal;
 }