[Joanne BParticipant]

Hi there,

I have a custom font working fine on my site but I cannot access it in Revolution slider.

Can you tell me how?

Thanks,
Joanne

[Joanne BParticipant]

This reply has been marked as private.

[JadeModerator]

Hi Joanne,

You can refer to their step-by-step guide here at this URL (http://www.themepunch.com/faq/use-fonts-google-fonts/) which is basically explaining how to use fonts other than Google fonts.

Hope that helps.

[Joanne BParticipant]

Thanks,

As I mentioned, I have no issue getting the web fonts working on my site. It is specifically in RevSlider that I have the problem. They do not apple in the dropdown menu.

Thanks,
Joanne

[ChristopherModerator]

Hi there,

Google fonts need to be added via punch fonts module.
If you’re trying to add google font please check this link : http://www.themepunch.com/home/uncategorized/adding-my-own-google-fonts/

But if you want to use one of your embedded font, it can’t be displayed in font list. You should use CSS.

Hope it helps.

[Joanne BParticipant]

Thanks,

Yes, I want to use the font typonine that i have been using throughout the site. How do I go about t doing this via css?

Thanks,
Joanne

[Paul RModerator]

Hi Joanne,

You can add this under Custom > CSS in the Customizer.

body .rev_slider .tp-caption {
    font-family: "tystencil_regular" !important;
}

You may change tystencil_regular with any font you like.

Hope that helps.

[Joanne BParticipant]

Hi,

I have added this code to the customiser but “tystencil_regular” is still not in the font dropdown menu.

Running close to a deadline, please help!

Thanks,
Joanne

[John EzraMember]

Hi Joanne,

Thanks for updating the thread and sorry for the confusion. When adding your own fonts they won’t show up on the dropdown menu. What we meant by using CSS is that you would need to add your font manually once and then call it each time you would like to use it via CSS selectors.

The example given was to enable your font for and element in rev slider. Hope this clarifies – thanks!

[Joanne BParticipant]

Hi,

Sorry, I don’t quite understand. Can you explain how I use a custom font, which I have been using throughout the website on a revolution slider. Step by step be great.

Thanks,
Joanne

[RupokMember]

Hi Joanne ,

Thanks for updating. You can’t add new font to the dropdown selector because you don’t have control over the plugin. If you need to use your custom font then you need to load the font manually and use it with custom CSS –

body .rev_slider .tp-caption {
    font-family: "tystencil_regular" !important;
}

Follow the previous replies carefully to load fonts on your site.

Hope this makes sense.

Cheers!

[Joanne BParticipant]

Hi,

Not meaning to be rude but if you followed my replies you would know that I have a custom font working perfectly on my site. That is not my issue.

My question to you is this, once I have added the code you provided, which I have, how do I apply it to text in Revolution Slider. Can you explain how to carry out this instruction you gave me:

“What we meant by using CSS is that you would need to add your font manually once and then call it each time you would like to use it via CSS selectors.”

Thanks,
Joanne

[RadModerator]

Hi there,

Another support here. What font you’re currently wish to apply? Is it google font or manually added/installed font? No matter how you added it, the font application should be the same just as long as you remember the family name.

For example,

font-family: 'Roboto Condensed', sans-serif;

Let say you’re successful adding your custom menu either by punch fonts or manual, then you can simply edit your layer and hit “Style”, and click “Advance CSS” then simply add font-family: 'Roboto Condensed', sans-serif;. This is just one way of many possible workaround, the given above is another.

Again, you should replace tystencil_regular with your font’s family name. I checked your slider and you just added tystencil_regular, and I’m not really sure how you added or installed your font. I can’t even find Punch Font sections from your site.

Let’s stick for the first two question before we continue, or else we’ll both get more confused 🙂

1. How did you added your working custom font?
2. And what family name?

Then I will gladly test your font directly to your slider, and provide further steps on how it be applied per layer.

Thanks!

[Joanne BParticipant]

Hi there,

Thanks for getting back to me in detail.

1. I added the font using the code below to the customiser
2. The font family is ‘tystencil_regular’

Thanks,
Joanne

@font-face {
font-family: 'tystencil_regular';
src: url('http://www.danawwhite.com/wp-content/fonts/TyponineStencil-Regular-webfont.eot');
src: url('http://www.danawwhite.com/wp-content/fonts/TyponineStencil-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.danawwhite.com/wp-content/fonts/TyponineStencil-Regular-webfont.woff2') format('woff2'),
url('http://www.danawwhite.com/wp-content/fonts/TyponineStencil-Regular-webfont.woff') format('woff'),
url('http://www.danawwhite.com/wp-content/fonts/TyponineStencil-Regular-webfont.ttf') format('truetype'),
url('http://www.danawwhite.com/wp-content/fonts/TyponineStencil-Regular-webfont.svg#tystencil_regular') format('svg');
font-weight: normal;
font-style: normal;
}

h1, .h1, h2, .h2, h3, .h3, h5, .h5, h4, .h4, h6, .h6, #site-logo, .post-title, .widgettitle {
   font-family: "tystencil_regular" !important;
}

[RadModerator]

Hi Joanne,

Your site’s going up and down on my end every time I save click save. And looks like it’s blocking me for a couple of minutes before letting me to load your site again.

I can’t really add changes this time for testing, but what you did is correct. I can see that you added this:

font-family: "tystencil_regular" !important;

at your layer’s Advance CSS.

But, do not expect that your font will be implemented directly to your slider or preview. You can only see the changes you added if you’re going to check it on live page. That’s because your added/installed custom font is only active where you added it, and that’s from your front site and not on admin side.

Check this http://www.danawwhite.com/?page_id=1126, the slider shows correct font as added on Advance CSS section.

Thanks!

[Author]

Posts