Use external css font with kotlin-styled

user_5131883 0
Viewed 272

I have created a kotlin react app using kotlin-react and I'm using kotlin-styled for CSS styling.

I want to change the font of a custom text component with a custom font from Google Fonts. With .css files I would have done the following:

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

.text {
  font-family: 'Nunito', sans-serif;
}

How can I achieve something similar with kotlin-styled. I have looked for a import or url function but It doesn't exist. Also, they do not have any documentation on external fonts. Any help is appreciated.

kotlin css
1 Answers

There is CSSBuilder#import available since pre.210, so what you can do is:

CSSBuilder().apply {
   import("url('https://fonts.googleapis.com/css2?family=Nunito&display=swap')")
    
   fontFamily = "'Nunito', sans-serif"
}
user_126357480
Related