Hi There you dont have to declare them universally, you can use:



But the best way to avoid a clash with your styles in the dash is to wrap your site, so your theme would have something like the following.



dont forget to style the wrapper so it covers the entire site, something like:



this way you can write your CSS like so.



This way your styles wont clash with the dash.

Hope that makes sense.

Regards

David

The dashboard has a separate style sheet in concrete/css, I think that should override typogrophy. I don't get changes to the dashboard fonts when I make adjustments to typography.css

"I don't get changes to the dashboard fonts when I make adjustments to typography.css"

That may be due to linking your style sheet by


But if you want to use customisable styles via the theme customisation options it needs to be linked with



which does clash with the dashboard styles if its not wrapped or done per specific area.

Sorry, it is nor really clear from your comment what should I do.

Originally, I used "getThemePath". Result: none of the style changes show up in the TinyMCE editor if I wrap my css selectors into like #container. If I just declare them like P, A, and H, it messes up the whole dashboard.

Now I changed the linking method to "getStyleSheet" - and none of the declarations are shown in the TinyMCE editor - no matter if I wrap them into #container or not. (Not to mention, this way concrete5 loads the typography.css from the tools directory, not from the packages.)

Also, a strange thing happened after I tried out the different methods: Even without wrapping my selectors to anything - TinyMCE shows the default styling - BUT there is text-shadow on several elements (including the edit bar) so it loads the typography.css (that's where the shdaow comes from), but for some reason none of the other styling shows up (like fonts or fontsizes).

Edit: I don't need customizable styles - I just want the content editor show the text as it will be on the page.

Sorry I misunderstood what you meant. If you link to your styles like this:



and wrap your site, and use the styles like so, in typography.css:



Then your styles will be locked away from the Dash, BUT the styles wont show in TinyMCE, they will just show on your site, this is normal, if you want to have your styles actually showing up inside TinyMCE I wouldnt know the best way to achieve that as I have never had a need to do it, sorry.

I thought TinyMCE was the only reason one should use a separate typography.css.
Otherwise I'd just put all the typographic styles into the style.css.

Thanks for your answers.

Typography.css is only really essential if you wish to customise colours and fonts through your themes, customise options, if you don't need that functionality there is nothing to stop you putting all your typography in your main style sheet. :)

Recently, I was having an issue getting font styles to display in TinyMCE. The root of the problem was that typography.css was located at /themes/site/css/typography.css vs /themes/site/typography.css

To remedy the situation without changing the file structure I added a symlink between the two.



Good luck!