Adobe TypeKit activated but no changes in the font

• 

  fredrikstrietz · Member · Jul 22, 2013 at 5:12 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  I’m using the custom design upgrade and I made successfuly som changes in the menu color and so on. So css is working.

  Now I want to use the font “Adobe Geramont Pro” in all menues and text.

  At TypeKit I made the following:
  I created an Adobe TypeKit account and added this font. I have a TypeKit ID and in the Adobe TypeKit settings I added “tanjastrietz.wordpress.com,*.wordpress.com” to the domain settings. Then I published the changes.

  At my wordpress.com page I made the following:
  At the custom design area I added my typekit ID. The page tells me that I’ve added it successfuly.
  At the css section I’ve added the following text (copied from TypeKit.com):

  h1 {
  font-family: “adobe-garamond-pro-n4”, “adobe-garamond-pro”, sans-serif;
  font-style: normal;
  font-weight: 400;
  }

  If I open my website in Chrome, Firefox or IE (Cache deleted) I can see the litte Adobe TypeKit Logo at the right buttom. But my fonts didn’t change! I still see the default fonts! How can I get my font?

  Thanks for your help!

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Jul 22, 2013 at 8:43 pm

  • Copy link

  It seems “h1” is not the right selector for titles in the Structure theme that you are using.

  To find which selector list to use, right-click on one of the titles and select the “Inspect Element” option. That should pull up a panel showing the HTML for the item you clicked on as well as all of the CSS that applies to it on the right. Make sure you were using a modern browser such as an updated version of Chrome or Firefox, see http://browsehappy.com/

  Once you can see the panel with the CSS in it, look for the selector list that the theme uses for titles. In the case of the Structure team, you would want to replace “h1” with the following list of selectors instead:

  .posttitle, .posttitle a, #content h3, #content h4, #content h3 a, #content h4 a, #content h5, #content h6, #content h5 a, #content h6 a

• 

  fredrikstrietz · Member · Jul 23, 2013 at 3:03 pm

  • Copy link

  Hi,

  thanks for your help. After a few tries I found out that I had to add ” #content p ” – because my text has this format.

  Now at all my css part is:

  .posttitle, .posttitle a, #content h3, #content h4, #content p, #content h3 a, #content h4 a, #content h5, #content h6, #content h5 a, #content h6 a {
  font-family: “adobe-garamond-pro-n5”, “adobe-garamond-pro”, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  }

  Thanks for that!

  Another question: Do you know how I can change the font in the menu? I didn’t find any selector for the menu font.

  Thanks!

• 

  designsimply · Member · Jul 23, 2013 at 4:07 pm

  • Copy link

  Another question: Do you know how I can change the font in the menu?

  To target the main menu items of the Structure theme in order to change the font-family, use this selector:

  #navbar, .navbar

• 

  fredrikstrietz · Member · Jul 24, 2013 at 8:57 am

  • Copy link

  Thanks a lot! It works.

  It’s always great to ask some things in this forum and get so competent answers.

  I’m really happy with the support of you and your collegues.

• 

  designsimply · Member · Jul 24, 2013 at 5:26 pm

  • Copy link

  Thanks!