Problem with Google Fonts

Discussion in 'Dzonia WordPress Theme' started by callebe, Sep 9, 2013.

  1. callebe

    callebe New Member

    Joined:
    May 25, 2013
    Messages:
    28
    Likes Received:
    0
    Hi there,

    I just change the font from my website but i have some doubts.

    1 - I need to use two different fonts on my website:
    @import url(http://fonts.googleapis.com/css?family=Indie+Flower);
    @import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);

    I already inserted it on my style.css, and i wrote on Custom CSS:
    h1,h2,h3,h4,h5,h6,p,a,span{
    font-family: Indie Flower;
    }

    But, i only need "Indie Flower" font to be the Title fonts. The other texts need to be "Quattrocento Sans".

    How can i know witch type of font i'm adding to each part of the website?

    My site url is: http://donossoquintal.com.br/home/

    Thanks a lot!
     
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    For this issue follow the steps given below.

    1. Go to the link http://www.google.com/fonts/ and search your font.
    2. Click on the Quick use button.

    [​IMG]


    3. After click, Scroll down the page and copy the font link from the 3rd point of that page as shown in the image given below.

    [​IMG]

    and paste it with the import code in the style.css file (Theme directory ->style.css ) as shown in the image given below.
    [​IMG]


    and use this font in the Custom CSS code.

    For example:

    Paste the code, like given below, in the Custom CSS section.
    Code:
    h1,h2,h3,h4,h5,h6{
    font-family: noto serif;
    }
    and do the same steps for the other google font.
    And paste the code for paragraph in the custom css like given below.

    Code:
    p {
    font-family: Enter your other google font name;
    }
    This will solve your issue.
     
  3. callebe

    callebe New Member

    Joined:
    May 25, 2013
    Messages:
    28
    Likes Received:
    0
    Hi Piyush,

    I did exactly as you said, but it did not work out.
    It seems that I can only use on Google Font, because, when I insert the first Font (Indie Flower) it works fine, but when i insert my second font (Quattrocento Sans) the first one went off.
    I understood what you said about the paragraph font, but i want them together, the main fonts and the paragraph font and i pasted the code exactly as you said.
    Please, help me solve that!!!Lol

    Thanks a lot!!
    All you guys from Ink Themes are Awesome!! Always helping when we need!!!
     
  4. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  5. callebe

    callebe New Member

    Joined:
    May 25, 2013
    Messages:
    28
    Likes Received:
    0
    Sure, no problem.
    I'm sending attached an example of the Main Font (Indie Flower) and the secundary font (Quattrocento Sans).
    I want this combination in all parts of the site.

    Can you help me?

    Thanks a lot!
     

    Attached Files:

  6. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    p{
    font-family:Quattrocento sans-serif!important;
    }
    This will solve your issue.
     
  7. callebe

    callebe New Member

    Joined:
    May 25, 2013
    Messages:
    28
    Likes Received:
    0
    Gourav,

    I did what you said, but that is the problem. If I insert the code for "Quattrocento Sans" Font, the "Indie Flower" Font stop working.
    That's my problem, i want to use the two fonts together, in the main font and in the secondary font, but i can't do it.
    I think there is something in the code that tells the page to use the two fonts simutaneous. That's what i need!
    Can you help me?
     
  8. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  9. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    I have checked your website and found that both Google font are working fine simultaneously on your site.
    I have used separate selector to style the paragraph and the heading separately, and putted that css code in Custom css section.
    Now, your issue has been resolved, you can check your website.
     
  10. callebe

    callebe New Member

    Joined:
    May 25, 2013
    Messages:
    28
    Likes Received:
    0
    Piyush, thank you very much!!!
    You guys are the best!!!

    Just one little question?
    How can i change the Font Size and color from each font, the Indie Flower and the Quattrocento Sans?

    Thanks a lot!!
     
  11. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    p{
    color:green ! important;
    font-size:24px;
    }
     
    h1,h2,h3,h4,h5,h6{
    color:red;
    font-size:34px;
    }
    .inner_area h2 a center {
    color:red;
    font-size:34px;
    }
    .inner_area center {
    color:green;
    font-size:24px;
    }
    #slides .caption h2 a {
    color: red;
    font-size: 30px;
    }
    You can adjust the value "font-size" as per your requirement.
    In place of "red" and "green" you can put your color or color code.

    This will solve your issue.
     

Share This Page