Squares loaded first, then icons - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
April 3, 2026 at 5:04 pm #1496559
MORTULGAAH
Participant
Hello, I made a very small font on icomoon. I uploaded it, but when the site loads, it shows first squares instead of icons. How can I fix that? (It flashes squares, then loads icons.)

It is a really small font, TTF file is like 7kb.
- This topic was modified 2 weeks, 6 days ago by MORTULGAAH.
April 4, 2026 at 12:16 pm #1496576

Mike
Moderator

Hey MORTULGAAH,
It sounds like a caching plugin is defuring the font load or a CORS issue, or a slow server. Try disabling all of your plugins and checking the browser console for errors.

Best regards,
Mike

April 4, 2026 at 8:38 pm #1496589

MORTULGAAH
Participant

Well, FF said it couldn’t load font files, as I uploaded only SVG. Uploaded font files later on, and god the images on FF, but it is still very slow. Gotten only woff2 error in FF; but that was not even in incomoon pack.

The launch is tomorrow, I will have to fall back to built in stuff..

If you have ideas, please pass them on.

Also, I found css bug on image with highlights. The shrinked view sows arrow that is not cut, and on the images themselves, the arrow is black and goes into the white bogy of the tooltip.

April 5, 2026 at 2:05 pm #1496597

Mike
Moderator

Hi,
To disable the Linked Image Overlay, go to Theme Options > Advanced Styling > Linked Image Overlay > Disable Overlay

Best regards,
Mike

April 9, 2026 at 8:38 pm #1496714
Guenni007
Participant
It could be a problem of font-display settings:
If you have activated the option to load the fonts by swap – then it might be neccessary to exclude those icon-font files from that.
it ist found on : Enfold Child – Performance – Show Advanced Options – Custom Font Display Behaviour.

To exclude – put this to your child-theme functions.php:
```
function my_custom_font_display( $font_display, $font_name ){
  // List of all icon fonts that are not allowed to “swap”
  $icon_fonts = array( 
    'entypo-fontello', 
    'entypo-fontello-extra', 
    'medical', // your custom icon-font files names
    'numbers',
    '3d-icons',
  );

  // Check whether the font name contains any of the icon terms (wildcard search)
  foreach( $icon_fonts as $icon_font ) {
    if ( strpos( $font_name, $icon_font ) !== false ) {
      return 'block';
    }
  }

  // Fallback for all other custom fonts from Enfold
  if( strpos( $font_name, 'avia-module-custom-font' ) !== false ) {
    return 'block';
  }

  return $font_display;
}  
add_filter( 'avf_font_display', 'my_custom_font_display', 10, 2 );
```
this will then generated:
April 9, 2026 at 8:44 pm #1496715
Guenni007
Participant
FOIT – Flash of Invisible Text Effect

To give it a name for the sake of clarity, the effect is called “Flash of Invisible Text.” This means our text content flashes briefly after the web font has loaded. Of course, the abbreviation sounds better: FOIT (“Flash Of Invisible Text”).

The normal process is that while the font is still loading, text is automatically displayed in the system font after 3 seconds. We can speed this up using the CSS directive font-display: swap;.

However, what is intended for fonts prevents icon fonts from loading correctly—because they have no browser fallback equivalent.

Or read here for more info: https://css-tricks.com/almanac/properties/f/font-display/

if you look the rule:
```
#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont="entypo-fontello"]::before {
  font-family: 'entypo-fontello';
}
```
you see what is the crux: no fallback Font – so if you swap those icon-fonts – the browser does not know what to show.

here you see the wanted behaviour by swap:
```
h1 {
  font-family:'opensans-flex',Helvetica,Arial,sans-serif
}
```
if the browser is still loading the opensans-flex files – it will show your content with Helvetica instead.
April 14, 2026 at 9:27 am #1496797

MORTULGAAH
Participant

Thank you very much.

I have to publish site as is. – I will have to return to this, because we are optimising content currently.

The general idea was to extract and use only icons I actually needed. It flashed / didn’t display correctly.

I will try to implement your solution later on.

Thanks
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.