1

[007me]

007me

#7892

Hi,

I’ve implemented font-face with web fonts in the Custom CSS field in my test blog here and it is working fine.

http://www.udiburg.com/blog2

I’ve copied the Custom CSS to my main blog and from some reason it doesn’t apply the font-face.

http://blog.udiburg.com

What could be the problem?

Udi

[Anonymous]

Anonymous

#39715

Did you try adding !important to CSS rules?

[007me]

007me

#39716

In the beginning of every location?

[Anonymous]

Anonymous

#39717

No, like this,

.element {

font-family: "something" !important;

}

[007me]

007me

#39718

Did like this and didn’t work, see here, and it works with no issue on my test blog

/* Adding webfonts */



@font-face {

font-family: 'Alef' !important;

src: url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.eot') !important;

src: url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.eot?#iefix') format('embedded-opentype'),

url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.woff') format('woff'),

url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.ttf') format('truetype'),

url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.svg#alefbold') format('svg') !important;

font-weight: bold;

font-style: normal;



}



@font-face {

font-family: 'Alef' !important;

src: url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.eot') !important;

src: url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.eot?#iefix') format('embedded-opentype'),

url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.woff') format('woff'),

url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.ttf') format('truetype'),

url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.svg#alefregular') format('svg') !important;

font-weight: normal;

font-style: normal;



}

/* End of webfonts */



/* Where to use the webfonts */

/* body {

font:16px/1.1 "Alef", arial, sans-serif;

}

*/

html,h1,h2,h3,h4,h5,h6,b,strong,p,body,a,all {

font-family:"Alef", arial, sans-serif;

font-weight:normal;

font-size:16px;

}

.sidebar h3 {

font-family:"Alef", arial, sans-serif;

font-weight:bold;

font-size:18px;

}



.post-title, .post-title a {

font-family:"Alef", arial, sans-serif;

font-weight:bold;

font-size:22px;

}



.commentform {

font-family:"Alef", arial, sans-serif;

font-weight:normal;

font-size:12px;

}



.single .author_h4 {

font-family:"Alef", arial, sans-serif;

font-weight:bold;

font-size:16px;

color:#2E2E2E;

}



.bgimage-excerpt .slider_post h2 a {

font-family:"Alef", arial, sans-serif;

font-weight:bold;

font-size:18px;

}



/* End of use webfont */

[007me]

007me

#39719

So… any solution?

[Kenneth John Odle]

Kenneth John Odle

#39720

!important declaration is in the wrong spot:

html,h1,h2,h3,h4,h5,h6,b,strong,p,body,a,all {

font-family:"Alef", arial, sans-serif !important;

font-weight:normal;

font-size:16px;

}

Put code in between backtick (

Code:

`

) characters. It’s usually located above the Tab key on your keyboard.

[007me]

007me

#39721

Oh… Ok 🙂 will check and will update.

Thanks Kenneth.

[007me]

007me

#39722

Quote:

!important declaration is in the wrong spot:

html,h1,h2,h3,h4,h5,h6,b,strong,p,body,a,all {

font-family:”Alef”, arial, sans-serif !important;

font-weight:normal;

font-size:16px;

}

Put code in between backtick (`) characters. It’s usually located above the Tab key on your keyboard.

Do you mean to put th ewhole code between (`)? or just the !important code? Cause nothing work yet.

[Kenneth John Odle]

Kenneth John Odle

#39723

That only refers to posting here in the forum, not in your stylesheet.

Including code between backticks prevents browsers from parsing the code. Not so important with CSS; much more so with HTML and PHP.