Does !Important Avoid Repaints In CSS?

Question

I'm working on reducing largest contentful paint for a Beaver Builder/WordPress site. I've had some issues where the Heading text is getting repainted late and causing high LCP scores despite the text being visible and styled almost immediately.

I've tried moving the themes fonts into the head in a <style> tag and I've marked them with important but I don't know if that's doing anything. I have locally hosted Google fonts that are preloaded.

<style>
html, body{
    font-family: Poppins, sans-serif !important;
}
    
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6, 
.fl-heading-text,
input[type="button"], input[type="submit"], [role="button"]{
  font-family: 'Teko', sans-serif !important;
}
</style>

I can see that my theme is loading system fonts in as a font family later that are being overridden via !important however I am wondering if this avoids a repaint?

Answer 1

!important doesn't avoid a repaint any more that other CSS (except perhaps that it is unlikely to be overridden by later loaded CSSO). Especially this case you are using a web font so say to use a web font ('Poppins' or 'Teko') when they are loaded, and fallback to default san-serif in the meantime.

This article gives more details on how to improve web font loading: https://web.dev/font-best-practices/