But I can see both the font in the element and the font in “inherited from tw-story” are checked. I don’t know enough to understand the problem unfortunately. The same is true for other parts of the story. For example I have one text that is changed like this:
When you used your web-browser’s Web Developer Tools to Inspect the <tw-hook> element, and the CSS rules being applied to it you would of seen two rules like the following that were ‘font’ related…
element.style {
font-family: 'Roboto Slab', serif;
font-weight: 800;
font-size: 60px;
}
/* some properties assignments have been remove for simplicity sake.... */
tw-story {
font: 100% Georgia, serif; /* property is ticked / active */
font-size: 1.5em; /* property is marked as overwritten */
}
…and you will notice two things:
in the first rule each of the property assignments is on its own line, because you expressed each assignment separately in your usage of the the (css:) and (font:) plus (text-size:) macros.
the second rule is setting multiple values (font-size & font-family) using a single font short-cut property, it then later overrides the initial 100% size value with a font-size property assignment.
If you look closely at the font property assignment in the Styles panel (of Chrome) you may notice a small arrow to the right of the property name, and if you click on that small arrow it should expand the font property to look something like…
font: 100% Georgia, serif;
font-style: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-variant-east-asian: normal;
font-weight: normal; /* property is marked as overwritten */
font-stretch: normal;
font-size: 1.5em; /* property is marked as overwritten */
line-height: 1.5em; /* property is marked as overwritten */
font-family: Georgia, serif; /* property is marked as overwritten */
…and see each of the child property assignments that make up that font short-cut, and that the child properties that you later overrode in your ‘element’ level rule have been marked as being overwritten (by a later rule).
So the reason why the font property in the tw-story related rule is still marked as active is because some of its child properties haven’t been overwritten by a later rule.
To echo what Grey stated here, it is important for anyone else reading this, who may be unfamiliar, to remember that CSS means “cascading” stylesheet; the hierarchy (literal placement in the sheet) is critical in determining which elements will be applied.
CSS has a few shorthand properties that one can take advantage of, to write more concise design elements, however they can be a pitfall for people otherwise unfamiliar with CSS hierarchy.
Not trying hijack the thread, just providing some extraneous resources for all those who might happen to come across this post later.
Thank you for trying to explain. I’m still having trouble understanding, unfortunately. I also can not see how this explains why it works fine on one computer and not another, or what I can do to fix it.
I am still getting this error - it work on my job pc but not at home. If I could just get an explanation on how to properly set the font, maybe that will fix it.
Create a new test project and add the @import rule to the top of that project’s Story Stylesheet area. It is important that the @import rule comes before any other CSS you place in that area.
Use the application’s Publish to File option to generate & save a Story HTML file, then view that HTML in your favourite web-browser.
Open the web-browser’s Web Developer Tools, then select its Network tab. This tab shows the any network or local file cache usage when files & resources like the font file are accessed.
Use the refresh key (often F5) to reload the current HTML file, and you should see entries appear in the Network panel relating to the retrieval of the font file information. If successful the status should be 200, which is one of the HTTP Response codes for success.
View this Story HTML file on the other machine, and do steps 3 & 5 again to see if you get a successful status code on it as well.
If all the above worked then you know the font should be available for usage in your project.