en WordPress.com Forums › CSS Customization

font issue

• Author
  Posts
• Apr 11, 2017 at 3:13 am #2919753
  
  usinarevista
  

  Member

  hey! i’m having a little trouble setting a different font to a certain div class.

  the numbers (nº1, nº2…) and sub-titles (pensamento originário, vigência do poética…) of this post for instance: https://revistausina.com/2016/01/31/emmanuel-carneiro-leao/

  are set as div class numerox and divclass titulox, but when i try to affect it by using this code:

  .numerox a {
  	font-family: "lft-etica-display-web", "lft-etica-display-web-1", 'Open Sans', sans-serif;
  	font-size: 150%;
  	font-weight: 200;
  }
  
  .titulox p {
  	font-family: "lft-etica-display-web", "lft-etica-display-web-1", 'Open Sans', sans-serif;
  	font-size: 130%;
  	font-weight: 200;
  }

  it keeps changing to ‘open sans’…

  why is that? i’d guess that maybe i don’t have that font installed, but it doesn’t make sense, since the menus and other main titles are with this font.

  any help is appreciated

  thanks a lot

  The blog I need help with is revistausina.com.

  Apr 11, 2017 at 6:16 am #2919860
  
  thesacredpath
  

  Staff

  Hi there, I checked at Customize > CSS, and also in my web inspector on that post, and I see Open Sans in the two CSS rules you referenced. Did you get this figured out?

  Apr 11, 2017 at 1:28 pm #2919887
  
  usinarevista
  

  Member

  Not really…. Any ideas why the code doesn’t work? Or how to overwrite OpenSans with the font assigned? Also when I inspect it after applying the CSS seems like my code is overwritten by something else idk why :/

  Apr 12, 2017 at 2:14 am #2919912
  
  usinarevista
  

  Member

  It looks like the

  .wf-active .entry-content p {
  font-family: "Open Sans",sans-serif;

  is overwriting the

  .titulox p {
      font-family: "lft-etica-display-web", "lft-etica-display-web-1", 'Open Sans', sans-serif;

  Any way I can fix that?

  Apr 12, 2017 at 2:59 am #2919914
  
  thesacredpath
  

  Staff

  Ah, ok, in I was not seeing that in my inspector originally. wf-active means there was, or is a custom font set for that stuff, and it will override the stuff put into the CSS (custom font styling takes precedence. We need to have the .wf-active preceeding the titulox p like this.

  .wf-active .titulox p {
      font-family: "lft-etica-display-web", "lft-etica-display-web-1", 'Open Sans', sans-serif;
      font-size: 130%;
      font-weight: 200;
  }

  Apr 12, 2017 at 3:59 am #2919915
  
  usinarevista
  

  Member

  It still doesn’t work :(

  The following code remains overwriting it:

  .wf-active .entry-content div {
  font-family: "Open Sans",sans-serif;

  Apr 12, 2017 at 3:42 pm #2919930
  
  usinarevista
  

  Member

  I was wondering if I style it with HTML will it work?

  Or maybe setting a h5 or some header that I don’t usually use and then setting the font for the header with CSS?

  Apr 12, 2017 at 8:41 pm #2919940
  
  thesacredpath
  

  Staff

  Oh geez, I can’t believe I didn’t notice this. The font stack you have is not the one required for the LFT Etica font. Change things to look like this.

  .wf-active .entry-content .titulox p {
      font-family: "etica-display-1","etica-display-2",sans-serif;
      font-size: 130%;
      font-weight: 200;
  }

  Do the same for .numerox a and add the .wf-active in front of the selector like this.
  .wf-active .numerox a

  Apr 13, 2017 at 12:55 am #2919941
  
  usinarevista
  

  Member

  thanks thesacredpath! it works flawlessly, you’re great!

  Apr 13, 2017 at 3:57 am #2919943
  
  thesacredpath
  

  Staff

  Awesome, and you are welcome!

• Author
  Posts

The topic ‘font issue’ is closed to new replies.