Freecodecamp: Commenting out the link to Lobster font-family doesn't render correctly.

Created on 10 Apr 2016 · 15Comments · Source: freeCodeCamp/freeCodeCamp

Challenge Name

Specify How Fonts Should Degrade

https://www.freecodecamp.com/challenges/specify-how-fonts-should-degrade

Issue Description

The issue occurs when commenting out the link to the Lobster font family from googleapis.com. To reproduce just comment out that line of code and watch as it does degrade

Browser Information

Browser Name, Version: Chromium version 49.0.2623.110 (64-bit)
Operating System: Linux 4.4.6_1 Void Linux (64-bit)
Mobile, Desktop, or Tablet: Desktop

Your Code

<!--
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
-->
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family:  Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Screenshot

Exsample code removed #1
Exsample code removed #2
Monospace Removed

help wanted

Source

Arzte

👍2

Most helpful comment

I saw this same thing and also thought it was a bug. It's not really an issue, since it's expected behavior, but does confuse.

A simple "solution" would be to add a clarification to the challenge. Something along these lines:

Note
If you have the Lobster font installed on your computer, you wont see the degradation because your browser is able to find the font.

Similar to the Note on this task:
https://www.freecodecamp.com/challenges/change-the-font-size-of-an-element

That way when people see this, they'll understand what's happening.

nschulzke on 10 Jul 2016

👍3

All 15 comments

@TheDoctorsLife I'm not able to reproduce this.

@FreeCodeCamp/issue-moderators any ideas on why this is happening?

erictleung on 10 Apr 2016

Possibly already passed this challenge before? It seems to work well on all my setups.

caravinci on 10 Apr 2016

This issue showed before I passed, I just went back later so I could report it.

Arzte on 10 Apr 2016

@TheDoctorsLife Can you try this challenge in incognito mode and check if still persists? I just want to eliminate the network being a culprit here. I too can't seem to reproduce.

raisedadead on 11 Apr 2016

I am getting the exact same error, on chrome and safari. It retains the Lobster font even after commenting out the link. I tried in incognito mode as well and I get the same result.
screen shot 2016-04-11 at 11 00 26 am

jaytaix on 11 Apr 2016

👍1

Chrome Canary: Not getting this issue.

mattdbr on 12 Apr 2016

👍1

is it also possible you'd have that font installed in your systems? @jaytaix @TheDoctorsLife

caravinci on 18 Apr 2016

👍1

is it also possible you'd have that font installed in your systems? @jaytaix @TheDoctorsLife

I do have it on my system. I was thinking that was the case... just annoying not knowing exactly what was causing it, but it goes away after disabling the font. So the two solutions so far are update Chrome and/or make sure you don't have Lobster enabled locally.

jaytaix on 18 Apr 2016

@jaytaix I guess it comes down to that, yes... however, those are real world issues, not exclusive to Free Code Camp. Your browser should ideally always be in its latest version, and if you have the font locally, you'll be able to see it in the browser without linking to external sources. (This happens to me a lot because of my visual design work).

Fact of life. Sorry we can't really help much. This however is beyond the scope of our site, so unless someone feels the need to reopen it, I deem this issue closed (albeit not technically "solved". I know...)

caravinci on 18 Apr 2016

I saw this same thing and also thought it was a bug. It's not really an issue, since it's expected behavior, but does confuse.

A simple "solution" would be to add a clarification to the challenge. Something along these lines:

Note
If you have the Lobster font installed on your computer, you wont see the degradation because your browser is able to find the font.

Similar to the Note on this task:
https://www.freecodecamp.com/challenges/change-the-font-size-of-an-element

That way when people see this, they'll understand what's happening.

nschulzke on 10 Jul 2016

👍3

I like @Lolinder's suggestion note.

erictleung on 10 Jul 2016

I added the note in English and Spanish in a branch on my fork, but don't have everything set up yet to run npm before submitting a pull request. Will get back to this on Monday, if no one else beats me to it.

Either way, will need someone for the other languages.

nschulzke on 10 Jul 2016

@Lolinder you may just fix the languages you are comfortable with. You can close the issue, the updates will be taken care in translation issues.

raisedadead on 10 Jul 2016

switching from Firefox to google chrome solved the problem. I hope that info may help someone else