Font-face and web fonts issue
-
Hi,
I’ve implemented font-face with web fonts in the Custom CSS field in my test blog here and it is working fine.
I’ve copied the Custom CSS to my main blog and from some reason it doesn’t apply the font-face.
What could be the problem?
Udi
Did you try adding
!important
to CSS rules?No, like this,
.element {
font-family: "something" !important;
}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 */Mod
!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.
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.
Mod
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.
Viewing 10 posts - 1 through 10 (of 19 total)
- 1
- 2
- You must be logged in to reply to this topic.