Custom CSS not working (but previously worked well)

Ask the Community Customization
1
  • Issue description:

Custom CSS not working and not applied to the weather widget. The custom css previously worked well but since 3 weeks ago it got problem and the css not applied. I never change the custom CSS. My concern is the width stuck at 300px and Nunito font is not applied.

My CSS:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

.eapp-weather-weather-component {
    max-width: 500px !important;
    width: 100%;
}

.eapp-weather-forecast-component {
  margin-top: 46px;
}

.eapp-weather-detail-component {
  padding: 26px 24px 0;
}

.eapp-weather-weather-detail {
  font: 400 14px / 18px "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  padding-bottom: 15px;
  height: 232px;
}

Screenshot from 2025-01-06 19-46-03
Screenshot from 2025-01-06 19-46-03966×961 173 KB

3

Hi there, @retiarylime :wave:

We’ve fixed the issue with the width by adding .global-styles, at the beginning:

image
image327×416 31.5 KB

As for the font, it seems to be working correctly now. Could you please double-check it?

4

The width is working now. However the font still not changing to Nunito when viewing on android. It seems to fall back to system font.

5

Got it, thanks!

I’ll double-check it with the devs and update you later :slightly_smiling_face:

6

Seems like elfsight custom css unable to load imported fonts.

7

Hi @retiarylime :wave:

We’ve added this code to the Custom JS field on the Style tab of your widget’s settings:

(function() {
  const style = document.createElement('style');
  style.textContent = "@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');";
  document.head.append(style);
})();

Please check your widget and let me know if the correct font is applied now :slightly_smiling_face:

9

It’s working now. Tq.

10

Great, you’re always welcome :wink: