Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dina Hafez
Dina Hafez
14,454 Points

The small caps font for abbr isn't working.

Hello,

I have no idea why the Alegreya Sans SC isn't working?

I have everything in the right place so someone please help!

https://w.trhou.se/t5v5c6ienp

Thank you.

6 Answers

fluffyllama
fluffyllama
11,682 Points

Check your @import url to make sure you're importing the fonts correctly from Google. I see

@import url('https://fonts.googleapis.com/cssfamily=Alegreya+Sans+SC:400,400i|Alegreya+Sans:400,400i|Alegreya:400i,900i');

when it should be

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,400i|Alegreya+Sans:400,400i|Alegreya:400i,900i');

Do you see the punctuation that is missing?

fluffyllama
fluffyllama
11,682 Points
fluffyllama
fluffyllama
11,682 Points

You have an extra CSS property that is changing your small caps. I think your problem is in the code below:

abbr {
  font-family: 'Alegreya Sans SC', 'Alegreya Sans', Verdana, Tahoma, sans-serif;
  text-transform: lowercase;
  text-decoration: none;
}
Dina Hafez
Dina Hafez
14,454 Points
Dina Hafez
Dina Hafez
14,454 Points

Hello,

I added the text decoration property because in the video there are no underlines for the Small Caps abbr, and that is why I used it but I don't think that intervals with the font-family and text-transform.

I even tried right now and comment it out but still not working...

So any idea why it is not working??

fluffyllama
fluffyllama
11,682 Points
fluffyllama
fluffyllama
11,682 Points

You were correct to add the 'text-decoration' property. Keep that line!

When I previewed your Workspace and inspected the 'abbr' class with Chrome Developer Tools, I found that the font is 'Alegreya Sans SC', which is correct! But the next line of your code is transforming it from small caps to lowercase. Delete the text-transform property.

Dina Hafez
Dina Hafez
14,454 Points
Dina Hafez
Dina Hafez
14,454 Points

It is not working as well. It is not changed to Small Caps but when I removed the text-transform it is like UpperCase but not small caps. Check the difference between the video and the workspace. It is not similar :(

Dina Hafez
Dina Hafez
14,454 Points
Dina Hafez
Dina Hafez
14,454 Points

Thank you so much. I don't know why this punctuation is missing, I copy it and paste it from google fonts. Anyway thank you.