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

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.

All 15 comments

@TheDoctorsLife I'm not able to reproduce this.

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

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

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

@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.

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

Chrome Canary: Not getting this issue.

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

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 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...)

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.

I like @Lolinder's suggestion note.

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.

@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.

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

it seems to be forgotten, I'll submit the PR :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ChrisKissoon picture ChrisKissoon  ·  10Comments

GaryLeutheuser picture GaryLeutheuser  ·  10Comments

FatKoala picture FatKoala  ·  5Comments

Tanvir-rahman picture Tanvir-rahman  ·  13Comments

anthkris picture anthkris  ·  10Comments