Question about HTML and CSS coding

Sleven · Post by **Sleven** » Tue Apr 02, 2013 2:50 pm

I've been working thru Code Academy's HTML course and everything has worked as expected except
font-family, the font never changes.

Now I'm up to the CSS section and font-family does not work there either, the font does not change to cursive. I have tried using a lowercase c on cursive and a capital c, Cursive it makes no difference the font does not change to cursive.

Here is what the CSS code looks like

Code: Select all

span {
        font-family: cursive;
    }

and here is a portion of the HTML code

Code: Select all

<body>
		<p>Much of this is regular text, but some of it is <span>fancy</span>!
		We can use our <span>newly fancified font</span> to add some
		<span>flair</span> to our website. It'd be a <span>royal pain</span> 
		to make each of these span tags <span>fancy</span> individually,
		but it's a cinch with <span>CSS</span>!</p>
	</body>

When I hit the summit button it says I did it right and bring up the next section.
I logged on to Code Academy using my wife's computer and the same code worked perfectly. I tried the font "times" and again it worked on her's but not on my computer. She is running Windows 7 on her machine and I am running LMDE Cinnamon 64 on mine. We both use Chrome as a browser.
Any ideas why it does not work on my Linux OS?

Post by **xenopeek** » Tue Apr 02, 2013 3:31 pm

Perhaps you don't have a font installed for that? What does it do on the default browser, Firefox. It's no secret that Chrome doesn't integrate well with the Linux desktop.

I opened the following file in Firefox:

Code: Select all

<html><head><style>
    span {
            font-family: cursive;
        }
</style></head>
    <body>
          <p>Much of this is regular text, but some of it is <span>fancy</span>!
          We can use our <span>newly fancified font</span> to add some
          <span>flair</span> to our website. It'd be a <span>royal pain</span>
          to make each of these span tags <span>fancy</span> individually,
          but it's a cinch with <span>CSS</span>!</p>
       </body>
</html>

Works fine (click to zoom):

Sleven · Post by **Sleven** » Tue Apr 02, 2013 5:14 pm

In the example you illustrated the font change was very obvious, I could tell as soon as I saw it.

I did the same section of code in Firefox and I had to look really close at the font to tell there was any difference at all, it did change but only minutely, not like your example at all.

I suppose it is a Chrome issue, as Chrome didn't change at all.

Post by **xenopeek** » Wed Apr 03, 2013 12:49 am

Do you have the Microsoft fonts installed? I do, that might make a difference. I think also on LMDE you install those with the package: ttf-mscorefonts-installer

Sleven · Post by **Sleven** » Wed Apr 03, 2013 6:01 am

I downloaded the ttf-mscorefonts-installer using synaptic,

How do I use it?

Post by **xenopeek** » Wed Apr 03, 2013 6:15 am

If it is installed, you will be already using it. When you ask for a cursive font, those new fonts you installed might also be used as a best match for the font family you requested. For better results, select the font by name.

Sleven · Post by **Sleven** » Wed Apr 03, 2013 6:32 am

Thank you for the help.

The font in Firefox changed, looks just like your example now, there was no change in Chrome with the Cursive font but I did notice that Courier works in Chrome. I'm guessing that Chrome has a limited number of internal fonts available.

Researching it a bit more I see that Chrome has some Add ons that lets you use different fonts

Linux Mint Forums

Question about HTML and CSS coding

Question about HTML and CSS coding

Re: Question about HTML and CSS coding

Re: Question about HTML and CSS coding

Re: Question about HTML and CSS coding

Re: Question about HTML and CSS coding

Re: Question about HTML and CSS coding

Re: Question about HTML and CSS coding