I have never seen this problem before and am stumped for a solution, so would really appreciate any help.
My CSS for body is as follows:
body {
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size: 16px;
}
I am selecting fonts using the Google fonts API. I have used both the LINK and IMPORT method for this (not together of course) but it makes no difference. I tried to include the HTML for the font style here, but it doesn’t show up.
What happens is that when I test the page in Chrome, Firefox and Safari, all body copy is rendered in the default browser font - Times New Roman - which I do not want. My testing is on a Macintosh but the same thing happens in Windows PCs.
I have looked widely online but so far have not found this exact problem and how to get around it and am wasting lots of time on a job that I’m doing as a freebie. Thanks.
Yes I did look more closely and have made this change:
body {
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size: 16px;
}
Makes no difference though. Have I missed something here - again? I tend to be literal in my older age, so a more specific reply would be helpful and I do appreciate your input.
To post code on the page, type three backticks on a line by themselves.
Begin your code on the next line.
After your block of code, type three more backticks on a line by themselves.
Like this:
```
your code here
your code here
```
Your code should still be properly formatted.
Alternatively, you can paste you code in the post, then highlight your code, then click the </> icon in the editor toolbar.
If you have a test site, a link to that test site would be OK, too.
I have been using Joomla extensively on the other sites I manage for various not-for-profit groups and am only getting back to HTML/CSS after a longish break - my memory isn’t what it used to be! Born in 1946 and introduced to the internet and computers way back in 1988 (I immediately knew this was the way of the future…)
Try the CSS order as above, but also take the quotation marks from around the words Roboto and Merienda - you should only need those if the font name is comprised of two or more words with spaces between them.
I changed the order to place the body rule at the top (suggested by chrisofarabia) and blow me down, it worked! Removing the quotes from around Merienda made them unworkable. I had originally followed the Google font instruction on that. So I restored the quotes and ran the script through the validator, with no errors. I wish I knew exactly what the issue was so I can avoid it in future.
Can’t explain any of this since the code itself looked fine. At least it is all working and I can get on with the rest of the site. While I am at it - any thoughts on including a ‘normalize’ section to the script, as I have found recommended across the web?
I think you were tripping over CSS specificity rules. Simply put, the order your CSS rules matters. If put in the wrong order, then a later rule can overwrite an earlier one, if they are of the same specificity. Try these couple of links for some further reading on it.
I use the one that’s built into the HTML5 Boilerplate. The idea with normalise/reset files, is that the browsers’ User Agent Stylesheet` defaults aren’t always set the same across the different browsers - the normalise/reset file gets things back to a (more or less) common position for all the tags you might normally use - it overrides it basically. From there, you can apply your own CSS knowing that you’re unlikely to trip over an obscure UAS setting that messes with your carefully crafted layout in one odd browser. They’re not a perfect solution, but they’re there to be used and tailored to your own needs. Lastly, put the link to the normalise/reset file before your own CSS file link - specificity again.
Just moving the body ruleblock in the code like you showed in your post should not make any difference. Maybe a typo was in effect or a font shorthand was also altered?
@itspmm, please take the time to confirm that it was the move itself that solved the problem by testing if moving the body rules back to its former place makes the error come back.
I really would like to learn, but please don’t bother if it causes any inconvienience to do.
I re-arranged the order of CSS rules to place the body rule after all my heading rules and it still works.
At least it is functioning again, although I’m not sure what the problem was. perhaps there was an odd invisible character that caused it all. My initial setup of the stylesheet was functioning, then it didn’t…
Thanks to everyone who has taken the time to help me with this. And to chrisofarabia, I have now downloaded HTML5 Boilerplate and will have a close look at this.
With this particular project, I am trying to keep it really simple so that the site owner can continue to maintain it and unfortunately, their understanding of HTML is pretty basic and none at all of CSS. We just do what we can…
