@font face Issues

[manavecplan]

Hi,

I'm trying to use @font face on my site without enqueueing or importing the stylesheets. Saves an extra http call.

What I am doing is:

1) Adding the font face kit for Open Sans Regular to /themes/bossa/fonts/opensans_regular_macroman
2) Adding the following code to bossa/stylesheet.css:

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

3) Targetting the body content by the following code:

body {
background-color: #f5f5f5;
color: #666;
font-family: 'open_sansregular', Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
line-height: 1.625;
}

However, none of this seems to be activating the font on my site. What am I doing wrong here?

[chillybin]

Check the location of your fonts directory

The way you have it set up is that its looking for this folder

domain.com/fonts

if you have it as a sub directory of your child theme, you will want to use

fonts without the first /

---

We are a web design & development consultancy based in Singapore who specialise in all things WordPress & Genesis. | ChillyBin Web Design & Consultancy: http://www.chillybin.com.sg | Twitter: @chillybindesign

[manavecplan]

Thanks for replying guys!

I didn't know about the / issue so that's a great insight in any case...

The problem persists though...now, tried it with the "/fonts" and simple "fonts". Should I be attempting to rename the folder or something?

P.S. Lovely mod of Parallax pro on your site...the "Our Work" Section seems to be broken though.

[chillybin]

I'm not using Parallax pro, just a custom theme. Thanks for letting me know about the work issue, i've been having issues with Royal Slider and W3 Total Cache, it seems to need manual refreshing every day... A problem for another day...

Do you have a link to your site? the fonts folder should be in

wp-content/themes/bossa/fonts/

where the style.css file is in

wp-content/themes/bossa/style.css

Otherwise you could use the following for each of the fonts

@font-face {
font-family: ‘open_sansregular’;
src: url(‘http://www.domain.com/wp-content/themes/bossa/fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot’);
}

---

We are a web design & development consultancy based in Singapore who specialise in all things WordPress & Genesis. | ChillyBin Web Design & Consultancy: http://www.chillybin.com.sg | Twitter: @chillybindesign

[Author]

Posts