[Kaz vParticipant]

Hi Guys,

I’ve implemented a full screen home page slide above the masthead. On top of it I’ve placed a layer for which I’ve set the font to “Daniel”.

Steps taken:

1. Downloaded free web font “Daniel” from fontsquirrel.com and uploaded it to wp-includes/fonts/;
2. Added the “@Font-face” code to child theme’s custom CSS;
3. In the slide editor, switched to advanced editor, added “font-family: ‘daniel’; code;

Doesn’t work. I can of course just input the text in Illustrator, export it as an image and set it as an image layer, but I’d prefer to have the right font show up in the Revolution Slider.

Hope anyone has a solution 🙂

[ChristianModerator]

Hey Kaz,

Can you give us the complete CSS code you used for the font?

Thanks.

[Kaz vParticipant]

Sure. This is de code for the font-faces as added to the child theme’s CSS:

/* ===== Daniel ===== */

@font-face{ 
	font-family: ‘daniel’;
	src: url('http://brandviews.nl//wp-includes/fonts/Daniel.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

@font-face{ 
	font-family: ‘daniel-bold’;
	src: url('http://brandviews.nl//wp-includes/fonts/Daniel-Bold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
}

@font-face{ 
	font-family: ‘daniel-black’;
	src: url('http://brandviews.nl//wp-includes/fonts/Daniel-Black.otf') format('opentype');
        font-weight: 800;
        font-style: normal;
}

/* ===== Hurme ===== */

@font-face { 
	font-family: ‘hurme’;
	src: url('http://brandviews.nl/wp-includes/fonts/HurmeGeometricSans2.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
}

@font-face { 
	font-family: ‘hurme’;
	src: url('http://brandviews.nl/wp-includes/fonts/HurmeGeometricSans2.otf') format('opentype');
        font-weight: 400;
        font-style: italic;
}

And these are the stylings for the two layers I’ve added to the Revolution Slider:

{
	font-size: 95px;
	font-family: 'daniel';
	font-weight: normal;
	color: #ffffff;
	text-decoration: none;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	text-shadow: none;
	border-width: 0px;
	border-color: #000000;
	border-style: none;
}

{
	font-size: 18px;
	font-weight: normal;
	font-family: 'hurme';
	color: #ffffff;
	text-decoration: none;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	text-transform: uppercase;
	text-shadow: none;
	border-width: 0px;
	border-color: #000000;
	border-style: none;
}

By the way, the Daniel font doesn’t get picked up by my Chromebook, but it does get displayed on my iMac. The Hurme font doesn’t get picked up by either OS/browser.

[AlexanderKeymaster]

Hi there!

It looks like you have “smart quotes” that snuck in somehow. This could be affecting the browser’s ability to use the font. For example:

font-family: ‘hurme’;

font-family: 'hurme';

Take a look at this, and let us know if it makes a difference. If not, could you provide a link to the site so we can take a closer look at what’s going on?

[Kaz vParticipant]

Yep, that’s exactly what happened.

Cause: I have the @font-face CSS codes as a Mac OS X’s Text Editor file so I can easily copy-paste them into new websites. Changed to smart quotes without me knowing 🙂

Thanks again guys; problem’s fixed!

[ChristianModerator]

You’re welcome Kaz. Glad we could help.

[Author]

Posts