[brandonlipmanParticipant]

Hi Themeco Team,
Trying to use the following TypeKit font I have installed, Proxima Nova, on a Revolution slider. I added the following CSS to customizer. I have tried a few suggestions from other topics but no success

The page is lipmanb.com/consulting

Thanks for your help.

[RupokMember]

Hi there,

Which CSS you have applied and where you have used it? Kindly point us.

Cheers!

[brandonlipmanParticipant]

Hi Rupok,
Thanks for your help. I now have a few more things I need some help with in addition to the Typekit Font so I am adding it to this post as well. To give you some content I have attached a PDF of the design I created in Sketch that I am looking to transfer over. Here are the sites I am modeling off of. Mattermark.com and GrowthGeeks.com. For navigation, I am trying to mimic the style of Mattermark. I had another thread open on Theme.co regarding navigation.

My site: lipmanb.com
Page of Focus: lipmanb.com/consulting

Posting credentials privately next.

1. Typekit Font In Revolution Slider – I am trying to set the typeface to “Proxima Nova Regular” for the main heading and “Proxima Nova Light” for the subheading. I have tried implementing this though Revolution Slider by going to the slider then to “CSS Global” and adding the following.

   .top-headline {
      font-family: proxima-nova, sans-serif;
   	font-style: normal;
   	font-weight: 400;
   }

   I also tried the suggested fix in this post as well as other variations after changing the name of the class for another reason.

   .tp-caption {
        font-family: 'proxima-nova' !important; 
   }

2. Revolution Slider Button – I also want to set the font face for the button “Get Started” to “Proxima Nova Regular”.
3. Button Position/Alignment – I want the button to be attached to the email entry box on the same line. I also want it to be square so the height of the entry field matches the height of the box. The button (as well as all buttons) should not have shadowing like it does now during hover state.
4. Marketing Stat Formating – How can I reduce the line spacing between the statistic and the attribution? See the attached PDF design for an example.
5. General Alignment Question – How do I best properly align things to look right on big screens and on small screens. I am using Cornerstone no container option but I feel like I am doing something wrong as it does not look right on large screens or small screens. It should have a max width for content but not for feature images.
6. Logo Image – See the image with all the logos. This image should be flush with the bottom section and scale appropriately considering screen size.
7. Vertically Center Feature Headline & Sub Text – I need a way to vertically center the headline, subtext and button for all of the sections.

[brandonlipmanParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the detailed information. Unfortunately, the password for the admin is incorrect when I tried to login. Please double check.

1.) See this:http://screencast-o-matic.com/watch/cD6tfYjmai

.top-headline {
    font-family: proxima-nova, sans-serif !important;
    font-style: normal !important;
    font-weight: 100 !important;
}

Make sure to add the class top-headline on the text element
or this:

.tp-caption {
    font-family: proxima-nova, sans-serif !important;
    font-style: normal !important;
    font-weight: 100 !important;
}

It is important to specify the font-weight.

2.) This will also work for that button:

.tp-caption {
    font-family: proxima-nova, sans-serif !important;
    font-style: normal !important;
    font-weight: 100 !important;
}

3.) Use this:

body #gform_wrapper_2 .ginput_container_email {
    width: 50%;
}
input#gform_submit_button_2 {
    top: 61px;
    border-radius: 0 !important;
    margin-left: 33%;
    position: absolute;
    font-size: 18px;
}

Can you clarify what you meant by shadowing?

4.) Add the class mbn to your p tag to reset default paragraph tag bottom margin. Something like this:
<p class="marketing-stat mbn">47% of buyers viewed 3-5 pieces of content before engaging with a sales rep.</p>
(m) -> margin (b) -> bottom (n)-> none
This link might help:https://community.theme.co/kb/css-class-index/

5.) To help you better with, can you be more specific? Give us the link with issue and point us to which section. Then describe in details what you want to achieve. This way we can be specific on our suggestion.

6.)By default image have bottom margins too. We can set this to zero by adding the same class mbn on your image class field. Then if you really want this to sit on the edge of the section, you might also want to set section padding to zero. This is 45px by default.

7.)Please use GAP element. Add it on top of your headings. You can use different GAP element per screen size for responsive nature.

Hope this helps.

[brandonlipmanParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the credentials.
Please also set font-wight when using this font. Something like this:

p {
    font-family: 'proxima-nova' !important;
    line-height: 1.58;
    color: #222222;
    font-weight: 100;
}

We have specified font-weight to be 100. By default, paragraph font weight is set to normal. Based on available Kit information, that is not available font weight for that specific font. So we have to set it.

Proxima Nova	100, 100 Italic, 300, 300 Italic, 400, 400 Italic, 500, 500 Italic, 600, 600 Italic, 700, 700 Italic, 800, 800 Italic, 900, 900 Italic

Hope this helps.

[Author]

Posts