External CSS not working on text

Font Test.zip (485.2 KB)

I am unsure if its just my external css file is wrong, or the link in the header is wrong? I am using Google fonts, but have provided the links.
When I place a normal text box with a h1 class name it doesn’t change.

Any help on this would be great. Thanks.

within your css you’re in conflict with your body-styling.
add !important to your h1 styling …to overwrite

tip: you can inspect the element when within browserpreview …

In your css file, you describe and html element h1. In your hype file, you give a class of h1 to an element div.

Add a . before h1 in your css file, like that: .h1 and it will be a class instead of a html element. It should solve your issue.

Or to avoid mixing html elements and class, replace h1 by title-large for example.
And don’t forget your css basics: html element description without anything (h1, p, em, stuff like that), a dot . before a class name, and a # before an id name. :wink:

After some tests, I found that you have to use a graphic element instead of a text bloc. Use a rectangle to avoid Hype to include hardcoded styles for text. It works.

So 2 things to fix your file:

  • fix the css with classes instead of elements
  • replace text blocs by rectangles

(and last comment, if you include google fonts in your css with @import, you don’t need to include it in hype, choose one method no need both)

wordly-with-css.hype.zip (176.0 KB)