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
Daniel Cardenas
Courses Plus Student 9,236 PointsMy style.css changes in wordpress not working.
I'm trying to change my header logofont to 'Bebas' but it's not working. This is the code i'm using in my child theme;
header #logo a.brand, .logofont { font-family: Bebas; font-weight: 400; font-style: normal; font-size: 32px; line-height: 40px; }
Please help?
Thanks, Dan :)
10 Answers
Andres Altuve
16,274 PointsHey Dan, since Bebas it´s a font that you got from the internet you have to let the CSS know where can it be found and what name is going to use.
Check out the following CSS Tutorial (CSS Foundations)
Daniel Cardenas
Courses Plus Student 9,236 PointsThanks Andres. I really appreciate the help. Let me try that out.
Daniel Cardenas
Courses Plus Student 9,236 PointsHi, Andres I saw the web fonts vid. But I still can't seem to change my title font to Bebas. Here is my site www.hsrac.com and below is the code I'm using;
/* Theme Name: Virtue Child Theme URI: http://hsrac.com/ Description: Child theme for the Virtue theme Author: Dan Cardenas Author URI: http://hsrac.com/wp-admin/ Template: virtue Version: 1.0 */
@import “../virtue/style.css";
/******* Web Fonts ********/
@font-face { font-family: “Bebas” src: url(‘Webfonts/Bebas.ttf’) format (’truetype’); font-wight: bold; font-style: normal; }
/****** Page *******/
header #logo a.brand, .logofont { font-family: “Bebas”; font-weight: 400; font-style: normal; font-size: 32px; line-height: 40px; }
Any help is much appreciated, what do you think?
Thanks, :)
Andres Altuve
16,274 PointsHey Daniel,
Did you upload the font to the folder Webfonts in your site? You were missing a ; before de src..
@font-face {
font-family: “Bebas”;
src: url(‘Webfonts/Bebas.ttf’) format (’truetype’);
font-weight: bold; font-style: normal;
}
/****** Page *******/
header #logo a.brand, .logofont {
font-family: “Bebas”;
font-weight: 400;
font-style: normal;
font-size: 32px; line-height: 40px;
}
Daniel Cardenas
Courses Plus Student 9,236 PointsI added the ; before src.
Help me understand something...so I have my Webfonts folder transferred over to my chiltheme folder via my filezilla ftp. Is that what you meant when you said "Did you upload the font to the folder Webfonts in your site?"
I think I might be doing this wrong...What do you think?
Thanks, :)
Daniel Cardenas
Courses Plus Student 9,236 PointsOne more thing...I inspected the elements on my site www.hsrac.com and noticed the code I'm trying to enter was crossed out. Why is that?
Andres Altuve
16,274 PointsHey Daniel, put the font´s folder at the root of your site for example: http://hsrac.com/webfont/ and in the src type the address.
Daniel Cardenas
Courses Plus Student 9,236 PointsI added my "Webfonts" folder to my Filezila ftp "public_html" folder /public_html/Webfonts
@font-face { font-family: “Bebas”; src: url('public_html/Webfonts’) format (’truetype’); font-wight: bold; font-style: normal; }
But still no luck.
By the way, I really appreciate your time spent on helping me out.
Andres Altuve
16,274 PointsThe folder of your font is Webfonts/Bebas/BEBAS.TTF
Daniel Cardenas
Courses Plus Student 9,236 PointsI fixed my style.css to reflect, @font-face { font-family: “Bebas”; src: url('/public_html/wp-content/themes/virtuechild/Webfonts/Bebas/BEBAS.ttf') format ('truetype'); }
But still nothing. I even tried a few other ways to right it but no luck. It's definitely something I'm doing wrong. Just don't know where the error is.
Would you mind connecting via google plus? This way we can screen share and see where the error is at. Just let me know what time works for you, of course if you are able to, no pressure. I understand.
Thanks again! :)