Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 23, 2017 at 7:45 am #811994
    themeforesttony

    I am having difficulty in changing the font-family on a page.
    I have given the page a CSS class but I am unable to get the font-family to be recognized with custom css. I am targeting the element but it is just changing to a generic serif or sans serif instead of the font family I am trying to get.

    Example
    On a page I want to change the h3 tag to be the Poiret One font
    I have given a page a CSS class of ‘change-font’
    In the Quick CSS I have added the following
    .change-font h3 {
    line-height: 2em!important;
    font-family: ‘Poiret One’, Sans-Serif!important;
    }
    The line-height is is targeting ok but the font-family is being ignored.
    Your help is most welcome.

    June 23, 2017 at 12:55 pm #812086
    Rikard

    Hey themeforesttony,

    How did you import the font and did you make sure that the search path of it is correct?

    Best regards,
    Rikard

    June 24, 2017 at 3:18 am #812371
    themeforesttony

    Hi Rikard,
    Nice to speak with you again.
    This was not an imported font. It is one of the theme supported fonts.
    I can call it from the advanced styling just fine, but when I try to call it from Quick CSS to overide, I can’t seem to get it to work.
    Hope that answers.
    Tony

    June 25, 2017 at 7:16 am #812600
    John Torvik

    Hi,

    You can try to use the !important in the font-family rule.

    Best regards,
    John Torvik

    June 25, 2017 at 11:05 pm #812835
    themeforesttony

    As you can see in my first post, I did use the !important. For a font that is in the Enfold family like Poiret One, Moligo or Merriweather (just to name a couple), am I correctly calling the font-family with the following:
    h3 {
    lfont-family: ‘Poiret One’, Sans-Serif!important;
    }

    June 26, 2017 at 3:28 am #812861
    John Torvik

    Hi,

    If you check your code, youll see that the "lfont-family:" isnt correct because the correct is: “font-family:” without the l.

    Best regards,
    John Torvik

    June 26, 2017 at 7:23 am #812900
    themeforesttony

    I am sorry John. That was a typo on my part. It should have read:
    h3 {
    font-family: ‘Poiret One’, Sans-Serif!important;
    }
    Would this be the correct way to try and call the Poiret One font to be what the h3 tag displays?

    June 26, 2017 at 12:41 pm #813019
    Victoria

    Hi themeforesttony,

    Looks ok. Have you tired it? Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    June 26, 2017 at 7:35 pm #813172
    themeforesttony

    Hi,
    The link to the page being developed is below.
    Specifically look at the h2 tag in each portfoilio item which is a website client name (ie: FIreGlass Studio, Sensor-Kinesis).
    I have given the text box element a custom css class of “center-content”
    In Quick CSS I have added the following:
    @media screen and (min-width: 768px){
    .center-content {
    margin-top: 50%!important;
    }
    }
    <This seems to work fine for the container sizing issue>
    .center-content h2 {
    line-height: 2em!important;
    font-family: ‘Dancing Script’, sans-serif!important;
    }
    <The line height call is working but the font-family is not.>

    Thanks

    June 27, 2017 at 3:05 pm #813460
    Victoria

    Hi,

    The font-family call is working too. It is applied as you can see on the screenshot in private.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.