Create and Modify Styles

Designers and art directors can use the Instant Articles “styles” capabilities to set one or more templates for your feeds. To create or modify the styles used for typographic elements that appear in your articles, use the Style Editor found on the Instant Articles Configuration page.

To get a sense of the design possibilities with our new style editor you can refer to our “Using Your Style Editor” example article. Learn how to access our example articles.

To find the Style Editor, go to Publishing Tools on your Page, then choose Configuration under Instant Articles from the left navigation menu.

“Default” is the basic style applied to articles that appear in your feed. Edit the default style by clicking on its name. This opens an overlay with options to customize individual elements in your articles.

To customize a style element:

  1. Find the element you want to edit and change the options associated with it. When you’re done, click the Save button.
  2. Preview your style in the window on the right. After your changes have been saved, you can see how looks on your articles in the Pages Manager app.
  3. Font options include the ability to select from the families of two system fonts available in iOS and Android:
    • Serif font: Georgia
    • Sans serif font: Helvetica Neue
  4. To change the color of an element, click the color swatch and enter the corresponding HEX code for your preferred color.

Create Additional Styles

Apart from the default style, you can also create additional styles for your articles.

  1. To create a new style, click the “Add Style” button. To tweak an existing style, select 'Duplicate' from the drop down menu next to name of the style at the top of the screen.
  2. Choose a name for the new style.
  3. Select the attributes for elements of the new style.

How To Add a Style to Your Articles

To apply a new style to articles in your feed, specify the style name in the article markup. By default, the style attribute content will be the Default style:

<meta property="fb:article_style" content="default">

To apply a different style, change the content attribute to match the preferred style name. Include any spaces if necessary, but upper or lowercase text doesn’t matter:

<meta property="fb:article_style" content="yourstyle">

Article styles can be specified on a per-article basis, if you want to apply multiple styles to your catalog.