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":

How to declare the correct custom font

  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
The rule(s) you will require are:
body {

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

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

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

}
Once the above rules have been applied ands saved, highlighting content (in the article or template builder) for the appropriate text component and selecting  bold, italic or bolditalic will apply the appropriate custom font declared rather than using the inbuilt browser equivalent.

Notes:

  1. The 'body {}' selector will always be pre-populated and cannot be edited 
  2. Ensure you include the font-weight: normal; & font-style: normal; rules
  3. Typically this rule will be applied to the paragraph component, but the rules can be used for any text component. 

Still need help? Contact Us Contact Us