There were a couple of changes I had to make in the CSS when I translated my code from my local program on my mac to CodePen.io. For instance, as explained, by some others in my previous post, I changed every style from a “px” based one to “%” based one to avoid clumping when browser is resized, or when the webpage is loaded on a small screen. But, when I translated this to codepen.io I had to change the values again because the the top bar in codepen.io messes with the style. So I sorted this out by experimenting.
However, the font-family - Helvetica, Times (oh by the way I know Helvetica and Times are two separate fonts) do not work in Codepen.io. On my mac, with the Helvetica font the title looks so pretty. But, on codepen.io I had to change to Monospace and the Title looks so repugnant.
(Here is my code: https://codepen.io/psomdeb25/pen/bajYvd)
Also, this is a screenshot of how it looks when I run it locally on my Mac.
Any comments?
What about now, and when should one put “” (double quotation mark)?
I see that my font does not look Helvetica yet. What do you think I am doing wrong? Or is it just codepen.
Look at the screenshot, the font looks very different from the output in codepen.io.
The rules of the font family names:
Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.
To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:
It is using Helvetica, well technically for me on Windows it is using Arial because of a Windows thing.
The stack is correct, but did you not want the title to look like the picture you posted? If so you should use “Times New Roman”, not Helvetica.
Oh. Thanks a lot!! Actually I do want the title look like in the screenshot. But, codepen does not show it like that. Doesn’t it?
It is now using the same font as in your screen shot. What about it looks wrong to you?
The font-weight is a little different for me, but that may just be a system thing (Mac vs Windows).
1 Like
I have already marked your previous answer as having SOLVED my question. Just a follow up question. How do you think I can correct the font weight? It is much more slender locally than on codepen. I checked on my friend’s Windows system it looks the same on his system as it does on mine or yours. I think the font weight has to do something with codepen. It is somehow magnifying the font. Don’t you think?
Not sure what is causing the font to look thicker, but it might also have to do with the color. I save the pen again with a second copy of the title with black text color and it looks a bit thinner to me.
