It’s because the desired style is defined as element styles (with style attributes like <h2 style="font-size: 38px;">). These are the very last styles to be applied by the browser because they override all else. The time between when the text is first displayed and the styles are applied is the reason a “flash” appears.
Element styles are considered poor practice for a number of reasons and should be avoided. Best practice is use either external stylesheets or inline styles. Inline styles are easily accomplished by placing desired rules in the Additional CSS panel of the customizer.
In general, the recommended way to apply desired styles throughout the site that differs from your theme’s defaults is to create a child theme. One of the best reasons for avoiding element styles is it’s very time consuming and tedious to change appearance when you want a different look. With one of the above approaches, one simple change to one rule affects all applicable elements on the site.
To address the title “flash”, remove the style attribute from the title in page content and add the following rule using one of the above methods:
.vc_custom_heading {
font-size: 38px;
color: #000000;
text-align: center;
font-family: Raleway;
font-weight: 500;
font-style: normal;
}
Use a similar approach for all element styles in content, especially those that flash. If necessary, replace the style attribute with a unique class attribute which can be used to target that element in CSS. For example in the sub-title’s (7 reasons why…) surrounding p tag, replace the style attribute with class="my_sub_title" and add this to the CSS rules as above:
.my_sub_title {
font-size: 28px;
color: #3b5998;
text-align: center;
font-family: Domine;
font-weight: 600;
font-style: normal;
}
