Can not get a custom font to work

[viprotech]

Hi, I have a problem getting a text on a page displayed in a custom font. I spend a lot of time figuring out what the problem is, but I am stuck. Hope you can have a look and point me in the right direction.

I use Dante 2.56. (Actually use a child theme by copying the dante-child folder -that you supply in the original Themeforest ZIP- and placed it next to the dante folder in the themes folder of WP 3.9.1. and activated it).

What I want is to have a certain piece of text on a couple of pages in a special font. I want to use a class to mark this text.

So I downloaded the ‘Swiss 721 Bold’ font and ran it through the online converter at http://www.fontsquirrel.com/tools/webfont-generator. The files it returned are unzipped and put in a folder ‘customfonts’ which is a subfolder of the child theme.

Then I added this to the styles.css in the child folder:

@font-face {
font-family: ‘swiss_721bold’;
src: url(‘customfonts/swiss_721_bold-webfont.eot’);
src: url(‘customfonts/swiss_721_bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘customfonts/swiss_721_bold-webfont.woff’) format(‘woff’),
url(‘customfonts/swiss_721_bold-webfont.ttf’) format(‘truetype’),
url(‘customfonts/swiss_721_bold-webfont.svg#swiss_721bold’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

.logo_font {
color: #038a99;
font-size: 45px;
line-height: 45px;
font-family: swiss_721bold, “arial black”, gadget, sans-serif !important;
}

Then I made a page with a text block element, typed the text ‘viprotech’ with ‘logo_font’ and put in the ‘extra class name’ field. Then I made a second element ‘raw html’. In this element I included the class reference in the text field.

When I look at the page I see 2x ‘viprotech’ but not in the font I want…. (see attachment 1)

Then I tried to copy the above CSS rules (all of it) to the Themes options – Custom CSS field and then viewed the page again. Now I see (see attachment 2). The color is ok and the font changed, but not to the one I choose and need.

To me it looks like the CSS in the child theme is not read. Is that the case?
Also strange to see that the font height is different between the text block element and the raw html element. I have no clue how to solve it.

My site is running locally on IWP. Hope you can point me in the right direction without needing my site online. If you need that, I will do that.

Nb. I am quite new to html/css and therefore tested the principle by making a simple HTML and CSS file to see if it works – and it does. But not in the theme I use.

Thank you for your help!
Frank.

[Kyle – SUPPORT]

Hi

font-family: swiss_721bold, needs to be in quotes, like:

.logo_font	{
color: #038a99;
font-size: 45px;
line-height: 45px;
font-family: 'swiss_721bold', “arial black”, gadget, sans-serif !important;
}

– Kyle

[viprotech]

Hi Kyle,

Thank you for looking into this. I tried what you said, using single and double quotes… same result. Can you please have another look for me?

Thanks,
Frank.

[Kyle – SUPPORT]

Please can you provide me with your link and let me know which text you are trying to make this font

– Kyle

[viprotech]

This reply has been marked as private.

[viprotech]

Hi,

I copied the custom CSS via the dashboard – Appearance – Editor and added the code via here. Now it works! I have no idea why it works now and not by adding it manually via Notepad++, but hey – it works.

Thanks for the help so far.
Frank.

[Swift Ideas – Ed]

Glad you sorted it 🙂

– Ed