font not displaying WordPress

• REFUNDED

Hello

With the following CSS i should get the font Benton Modern Display to show on my Wordpress site.
However, The site defaults to Times for some reason.

The fonts are embedded using @font-face.
The fonts were generated by Font Squirrel.



/* =WordPress Core
-------------------------------------------------------------- */
@font-face {
font-family: 'Conv_BentonModDisp-Regular';
src: url('fonts/BentonModDisp-Regular.eot');
src: local('☺'), url('fonts/BentonModDisp-Regular.woff') format('woff'), url('fonts/BentonModDisp-Regular.ttf') format('truetype'), url('fonts/BentonModDisp-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}

}
@font-face {
font-family: 'bentonmoddispregular';
src: url('bentonmoddisp-regular-webfont.eot');
src: url('bentonmoddisp-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('bentonmoddisp-regular-webfont.woff') format('woff'),
url('bentonmoddisp-regular-webfont.ttf') format('truetype'),
url('bentonmoddisp-regular-webfont.svg#bentonmoddispregular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'bentonmoddispitalic';
src: url('bentonmoddisp-regularitalic-webfont.eot');
src: url('bentonmoddisp-regularitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('bentonmoddisp-regularitalic-webfont.woff') format('woff'),
url('bentonmoddisp-regularitalic-webfont.ttf') format('truetype'),
url('bentonmoddisp-regularitalic-webfont.svg#bentonmoddispitalic') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'robotoregular';
src: url('Roboto-Regular-webfont.eot');
src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Regular-webfont.woff') format('woff'),
url('Roboto-Regular-webfont.ttf') format('truetype'),
url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'robotolight';
src: url('Roboto-Light-webfont.eot');
src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Light-webfont.woff') format('woff'),
url('Roboto-Light-webfont.ttf') format('truetype'),
url('Roboto-Light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'robotolight_italic';
src: url('Roboto-LightItalic-webfont.eot');
src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-LightItalic-webfont.woff') format('woff'),
url('Roboto-LightItalic-webfont.ttf') format('truetype'),
url('Roboto-LightItalic-webfont.svg#robotolight_italic') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'roboto_condensedlight';
src: url('RobotoCondensed-Light-webfont.eot');
src: url('RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('RobotoCondensed-Light-webfont.woff') format('woff'),
url('RobotoCondensed-Light-webfont.ttf') format('truetype'),
url('RobotoCondensed-Light-webfont.svg#roboto_condensedlight') format('svg');
font-weight: normal;
font-style: normal;

}

.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
margin: 0;
padding: 0 4px 5px;
}
/* Global */
body, div { margin: 0; padding: 0; }
body { font-size: 14px; font-family: 'robotolight'; color: #333; line-height: 22px; }

h1 {
text-shadow: none;
font-family: 'bentonmoddispitalic';
color: #000;
font-size: 18px;
line-height:21px;
}

h2 {
font-family: 'bentonmoddispregular';
color: #000;
font-size: 32px;
line-height:28px;
}

h3 {
font-family: 'bentonmoddispregular';
color: #000;
font-size: 26px;
line-height:24px;
}

h4 {
font-family: 'bentonmoddispregular';
color: #000;
font-size: 24px;
line-height:21px;
}

h5 {
font-family: 'roboto_condensedlight';
color: #000;
font-size: 13px;
line-height:21px;
}

h6, p {
text-shadow: none;
font-family: 'robotolight';
color: #000000;
font-size: 14px;
line-height:21px;
}

img { border: none; }
p { line-height: 22px; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
a {color: #333; text-decoration: none; }
a:hover { color: #666; }
#main_container { width: 1240px; margin: 0 auto; }
/* Header */
#header { padding: 4px 0 25px 0; }
.head_social_cont { float: right; }
.head_social_cont img { float: right; margin-left: 3px; }
.logo { float: left; margin-top: 10px; }
.head_menu_cont { float: right; margin-top: 25px; }
.head_menu_cont ul { list-style-type: none; margin: 0; padding: 0; }
.head_menu_cont ul li { float: left; margin-left: 10px; font-family: 'bentonmoddispitalic'; font-size: 18px; position: relative; }
.head_menu_cont ul li a { display: block; padding: 2px 25px; color: #000; text-decoration: none; }
.head_menu_cont ul li a:hover, .head_menu_cont ul li.current_page_item a, .head_menu_cont ul li.current-menu-item a { background-color: #333; color: #fff; }
.head_menu_cont ul li ul { display: none; position: absolute; top: 25px; left: 0; z-index: 100; border-top: 1px solid #000; background-color: #fff; }
.head_menu_cont ul li ul li { width: 200px; float: none; margin: 0; }



Answers (3)

2014-02-14

zebra webdesigns answers:

Hi are you using custom css provided by theme or you are putting this code inside separate style sheet.
also if possible please provide the website URL

---

pj comments:

Using the custom CSS provided by the theme. Not putting this code inside separate style sheet.

---

zebra webdesigns comments:

Hello Pj

Please specify the full path for the font.
I have installed a demo font, using fontsquirrel in my local and provided the direct path and the font is working.

The theme I used is dynamik and this also generate the css dynamically not a separate style sheet.
Hope this helps you.

@font-face {
font-family: 'alex_brushregular';
src: url('http://localhost:8081/testground/wp-content/themes/dynamik-gen/fonts/alexbrush-regular-webfont.eot');
src: url('http://localhost:8081/testground/wp-content/themes/dynamik-gen/fonts/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://localhost:8081/testground/wp-content/themes/dynamik-gen/fonts/alexbrush-regular-webfont.woff') format('woff'),
url('http://localhost:8081/testground/wp-content/themes/dynamik-gen/fonts/alexbrush-regular-webfont.ttf') format('truetype'),
url('http://localhost:8081/testground/wp-content/themes/dynamik-gen/fonts/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');
font-weight: normal;
font-style: normal;

}
.entry-content p, .entry-content ul li, .entry-content ol li {
color: #333333;
font-family: 'alex_brushregular';
font-size: 1.8rem;
}

2014-02-14

Sai kumar answers:

Hi,

Please verify the location of the fonts. Is those fonts in same folder where the css exist?

Thanks
Sai

---

pj comments:

fonts are in the same folder as the style.css file.

---

Sai kumar comments:

Can you please provide me the url? I will check it and get back to ASAP.

Thanks
Sai

2014-02-14

Ryan S answers:

Just make sure you've added the correct font path e.g.

/fonts/sample-font.eot

so in your CSS code it should be like


@font-face {
font-family: 'roboto_condensedlight';
src: url('fonts/RobotoCondensed-Light-webfont.eot');
src: url('fonts/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/RobotoCondensed-Light-webfont.woff') format('woff'),
url('fonts/RobotoCondensed-Light-webfont.ttf') format('truetype'),
url('fonts/RobotoCondensed-Light-webfont.svg#roboto_condensedlight') format('svg');
font-weight: normal;
font-style: normal;
}


if your CSS is added inside /css and fonts in /fonts directory then it should something like

@font-face {
font-family: 'roboto_condensedlight';
src: url('../fonts/RobotoCondensed-Light-webfont.eot');
src: url('../fonts/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/RobotoCondensed-Light-webfont.woff') format('woff'),
url('../fonts/RobotoCondensed-Light-webfont.ttf') format('truetype'),
url('../fonts/RobotoCondensed-Light-webfont.svg#roboto_condensedlight') format('svg');
font-weight: normal;
font-style: normal;
}


One last tip, make sure you call the right font-family name


Hope that helps

---

pj comments:

fonts are in the same folder as the style.css file.

---

Ryan S comments:

That's weird, don't you mind attaching screenshot? I mean where you add your fonts and the style.css file.

The could should look something like this if both CSS and fonts are in same directory, I'm changing font name here.

@font-face {
font-family: 'Roboto Condensed Light';
src: url('RobotoCondensed-Light-webfont.eot');
src: url('RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('RobotoCondensed-Light-webfont.woff') format('woff'),
url('RobotoCondensed-Light-webfont.ttf') format('truetype'),
url('RobotoCondensed-Light-webfont.svg#roboto_condensedlight') format('svg');
font-weight: normal;
font-style: normal;
}


If things still not working maybe use Google font instead?