7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Can someone please help me with one basic CSS question, you could be a hero right now!

by jt47000
6 replies
  • WEB DESIGN
    • |
Hi,

I want to replace a font on my wordpress blog with a custom font I have. Here's my coding: (in red)

/*------------------------------------------------*/
/*--------------[FEATURED SLIDER]-----------------*/
/*------------------------------------------------*/

@font-face{
font-family:peacefulday;
src:url('http://www.industrialprincess.com/wp-content/themes/LeanBiz/fonts/PeacefulDay.ttf') format ("truetype");
}

#featured { position:relative; }
#featured-shadow { background: url(images/featured-bg.png) repeat-x; }
#featured-light { background: url(images/featured-shadow.png) no-repeat top center; position:relative; }
a#left-arrow, a#right-arrow { position: absolute; top: 45%; width: 63px; height: 128px; text-indent:-9999px; display: none; z-index: 6; }
a#left-arrow { background:url(images/left-arrow.png) no-repeat; left: 0px; }
a#right-arrow { background:url(images/right-arrow.png) no-repeat; right: 0px; }
.slide { padding-top: 123px; text-align: center; padding-bottom: 87px; }
.featured-description { padding-top: 33px; }
h2.featured-title { font-size: 60px; font-family: 'peacefulday', Arial, sans-serif; text-shadow: 1px 1px 1px #ffffff; margin-bottom:8px; }
h2.featured-title a { color: #e552a7; text-decoration:none; }
.featured-description p, .et_slide_text { font-size: 30px; font-family: 'Kreon', Arial, sans-serif; color: #678e8d; text-shadow: 1px 1px 1px #ffffff; }
#featured-border { background: url(images/featured-border.png) repeat-x; height: 2px; }
#featured-bottom-shadow { background: url(images/featured-bottom-shadow.png) no-repeat center 1px; height: 29px; }

.featured_shadow_bg { border: 7px solid #fff; float: left; }
.featured_image_shadow { border: 8px solid #fff; float: left; -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.1); box-shadow: 0px 0px 8px rgba(0,0,0,0.1); }
.featured-description { clear: both; }

.....

This is just an excerp from my CSS style sheet. Right now on the site its basically showing as an arial font instead of the peacefulday font. What is wrong? Should I put the @font-face{... at the top of the CSS sheet under Basic Styles or is it ok under the featured slider?

Thanks!

I've been trying this on my own and been having minimal luck.

JT
#basic #css #hero #question
  • Profile picture of the author michael0109
    if you want to use spencial font. You can use cufont to custom. Don't use this code bellow!

    Good luck to you!
    {{ DiscussionBoard.errors[7175226].message }}
  • Profile picture of the author BenQ
    Inspect elements with firebug. I can see your interior pages are "droid sans". Change the font family on line 48 of your style.css. You may want to use a google fonts plugin.
    Signature
    {{ DiscussionBoard.errors[7175276].message }}
  • Profile picture of the author jt47000
    body { line-height: 20px; font-family:'Droid Sans',Arial,Verdana,sans-serif; font-size: 12px; color:#626262; text-shadow: 1px 1px 1px #ffffff; background: #f4f4f4 url(images/body-bg.png); }
    Thanks! but the Cufont route seems like way more trouble than what its worth.


    Inspect elements with firebug. I can see your interior pages are "droid sans". Change the font family on line 48 of your style.css. You may want to use a google fonts plugin.
    I inspected it with firebug but didn't see what exactly the resolution would be. Ive messed around with line 48 over the past hour and still nothing, it keeps reverting backing to arial when i place in my own font. Now i have it back at the default title font.

    Google fonts doesn't have the font my client wants. I with they did but they dont

    There's gotta be an easier way

    Thanks for your input

    J
    {{ DiscussionBoard.errors[7175460].message }}
  • Profile picture of the author 3Knikkers
    @font-face
    {
    font-family: myFont;
    src: url('path/to/font/myFont.ttf'),
    url('path/to/font/myFont.woff'),
    url('path/to/font/myFont.otf'),
    url('path/to/font/myFont.eot'); /* IE9 */
    }

    p {
    font-family: myFont;
    }

    You need the other fonttypes for other browsers. And don't use http in de fonts URL. Just the path
    Signature

    A responsive web is a better web

    {{ DiscussionBoard.errors[7185749].message }}
  • Profile picture of the author jt47000
    @font-face
    {
    font-family: myFont;
    src: url('path/to/font/myFont.ttf'),
    url('path/to/font/myFont.woff'),
    url('path/to/font/myFont.otf'),
    url('path/to/font/myFont.eot'); /* IE9 */
    }

    p {
    font-family: myFont;
    }
    3Knikkers! you are the man! Thank you, that's exactly what I was looking for... and it worked!!! let me as you one more if you dont mind...


    Lets say I want to add a second font, would I just paste that whole paragraph of code again below the first set of code just with a different font name looking like the following?:

    @font-face
    {
    font-family: font1;
    src: url('/wp-content/themes/LeanBiz/fonts/font1.ttf'),
    url('path/to/font/font1.woff'),
    url('path/to/font/font1.otf'),
    url('path/to/font/font1.eot'); /* IE9 */
    }

    p {
    font-family: font1;





    @font-face
    {
    font-family: font2;
    src: url('/wp-content/themes/LeanBiz/fonts/font2.ttf'),
    url('path/to/font/font2.woff'),
    url('path/to/font/font2.otf'),
    url('path/to/font/font2.eot'); /* IE9 */
    }

    p {
    font-family: font2;


    }
    Would that be right?

    Thanks buddy!



    ------------------------------------------------------------------------------------------------------------------------

    I noticed one more problem, it changed the font on my post pages too. I don't want to put it on my post pages, I just want it on the main page on the featured slider, how do i get it back to only effecting the featured slider?

    Thanks
    {{ DiscussionBoard.errors[7187238].message }}
    • Profile picture of the author 3Knikkers
      Yes, the easy way is just copy the code and use a different font.
      Signature

      A responsive web is a better web

      {{ DiscussionBoard.errors[7190859].message }}

Trending Topics