Question about HTML and CSS coding

Questions about applications and software
Forum rules

Question about HTML and CSS coding

Postby Sleven on 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?
LMDE 64 running Cinnamon on an HP Compaq Core2 Duo 4G Ram
User avatar
Sleven
Level 4
Level 4
 
Posts: 400
Joined: Sun Oct 03, 2010 9:03 am
Location: Central Florida

Linux Mint is funded by ads and donations.
 

Re: Question about HTML and CSS coding

Postby xenopeek on 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):
Image
Image
User avatar
xenopeek
Level 23
Level 23
 
Posts: 18181
Joined: Wed Jul 06, 2011 3:58 am
Location: The Netherlands

Re: Question about HTML and CSS coding

Postby Sleven on 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.
LMDE 64 running Cinnamon on an HP Compaq Core2 Duo 4G Ram
User avatar
Sleven
Level 4
Level 4
 
Posts: 400
Joined: Sun Oct 03, 2010 9:03 am
Location: Central Florida

Re: Question about HTML and CSS coding

Postby xenopeek on 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
Image
User avatar
xenopeek
Level 23
Level 23
 
Posts: 18181
Joined: Wed Jul 06, 2011 3:58 am
Location: The Netherlands

Re: Question about HTML and CSS coding

Postby Sleven on Wed Apr 03, 2013 6:01 am

I downloaded the ttf-mscorefonts-installer using synaptic,

How do I use it?
LMDE 64 running Cinnamon on an HP Compaq Core2 Duo 4G Ram
User avatar
Sleven
Level 4
Level 4
 
Posts: 400
Joined: Sun Oct 03, 2010 9:03 am
Location: Central Florida

Re: Question about HTML and CSS coding

Postby xenopeek on 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.
Image
User avatar
xenopeek
Level 23
Level 23
 
Posts: 18181
Joined: Wed Jul 06, 2011 3:58 am
Location: The Netherlands

Re: Question about HTML and CSS coding

Postby Sleven on 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
LMDE 64 running Cinnamon on an HP Compaq Core2 Duo 4G Ram
User avatar
Sleven
Level 4
Level 4
 
Posts: 400
Joined: Sun Oct 03, 2010 9:03 am
Location: Central Florida

Linux Mint is funded by ads and donations.
 

Return to Software & Applications

Who is online

Users browsing this forum: No registered users and 1 guest