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 Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Why would a font NOT respond to sizing instructions?

I am using a third-party font. As far as I can tell, I have interfaced to the font provider according to instructions. I am getting the font and it is loading just fine. However it is larger than I want so I am trying to scale it down with a font-size: statement but no matter what I use for a rem size, it doesn't change the font size.

Here is the HTML

<link href='http://fast.fonts.net/cssapi/7950b455-f65a-45e0-a8e8-cd6fb05cf854.css' rel='stylesheet' type='text/css'/>

Here is the CSS

h1 {
     font-family:'Luminari W01';
     font-weight:400;
     font-style: bold;
     color: #F44336;
     text-decoration:none;
     font-size: 1.5rem;
     margin: 0;
}

I have used a rem size of 2.0 all the way down to 0.5, nothing changes. I can get the style to change. I've used normal, bold and italic (just for grins). Those changes will respond as expected.

What do you think?

3 Answers

Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

OK: Here is an answer that works just fine:

A little fine tuning on the CSS:

html {
    font-family:'Luminari W01';
    font-weight:400;
    font-size: 100%; /* set base font size */
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1.25rem;
  color: #222;
  background: #f7f5f0;
}

in the HTML selector - set the base font size. I chose 100% because that it suited my purposes. But I discovered that I could have used 200% or 75% just as well, had that suited my purposes. All it does it set the base font size to a starting size. Then all your rem statements become relative to that initial set starting size.

Int the spirit of giving credit where credit is due, here is the link at which I discovered the answer:

http://andy-carter.com/blog/using-scalable-css-units-for-font-sizes

Joseph Zimmerman
Joseph Zimmerman
6,402 Points
Joseph Zimmerman
Joseph Zimmerman
6,402 Points

I'm not sure, but curious if you tried setting it with a fixed size value such as em?

Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

I haven't done that yet, either with em or px. I try to stay with proportional measurements. But you are right I should try it.

Doug Hawkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points
Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

OK: Here is an answer that works just fine:

A little fine tuning on the CSS:

html {
    font-family:'Luminari W01';
    font-weight:400;
    font-size: 100%; /* set base font size */
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1.25rem;
  color: #222;
  background: #f7f5f0;
}

in the HTML selector - set the base font size. I chose 100% because that it suited my purposes. But I discovered that I could have used 200% or 75% just as well, had that suited my purposes. All it does it set the base font size to a starting size. Then all your rem statements become relative to that initial set starting size.