Avoiding Faux Browser Styles

Using the Style builder, it’s easy to assign a custom font for one or more text components.

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

Saying ‘No’ to faux browser styles

If you have access to the bold or italic versions of the font (and they have been enabled), it’s possible to avoid this faux effect by declaring the correct custom font(s) for each of the possible states.  This ensures the design of your content is never compromised. 

To find the names of the custom fonts necessary for the next steps:

1. Navigate to your Publication Settings
2. Select 'Fonts'
3. From the list, note down the names of the variations of fonts you wish to apply.  For example, "Aleo-Bold", "Aleo-Italic" and "Aleo-BoldItalic":

   

1. Open the style you wish to customise.
2. From the 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;
 }