Using @font-face

ivanodisey

Hi!

Just purchased and installed your theme. Just great!
One important thing, I need to upload some font-face fonts. I guess I have to go to Custom Fonts in Theme optiones panel, write my font and declare the @font-face in the css…

Looking at the strucuture of the css, Im a bit lost on where to declare the @font-face and where to upload the .eot, .woff, .svg and .ttf files.

Could yo help me with it?
Here is the website, if you need it: http://idesignbeautifulthings.com/walterhaus/

Thanks a lot in advance.

[Deleted User]

Hi,
I need to check how font-face work and then I will let you know.

Best,
Miłosz

ivanodisey

Ok, just if it helps (Im a bit on a hurry ; )

- you have to add this code tu the css (but I dont know in which css... style-light.css, base.css, skeleton.css...layout.css). This way you declare the font, in my case 'bauhaus_lt_btlight':

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

}

- then you have to upload the .woff, .ttf, .svg and .eot font files to the server, to point them from the previous code. Which I originate in this website with my original ttf:

http://www.fontsquirrel.com/fontface/generator

- and last, add font-family: 'bauhaus_lt_btlight'; property to wherever part of the css you want to add the font. For example, h1, p...

Ive been using them for two years, with a lot of wordpress templates, and they work great. But your theme has a more complex estructure of css and I cant find where to add the code and upload the fonts.

Hope this info helps!!

[Deleted User]

Ok, thanks for information.
If you want to make it quickly, you can give me your ftp username and password and I will do it for you.

Also, you can try it on your own:
1) Paste @font-face code to the layout.css file.
2) To the same folder (common/css/skeleton) upload your files.
3) In the fonts option menu paste this: bauhaus_lt_btlight
to CSS Font family field. Try paste it without ' and with '.

Then let me know if it works for you.

Best,
Miłosz

ivanodisey

Done! Thanks a lot.

By the way, If I want to use more than two fonts in the theme options panel (for example, Bauhaus Bold for the h1 and h2), do I add the font face and the property also in the layout.css file?

Maybe I have to use !important; to bump over the font I choose on the font panel...

thanks!

[Deleted User]

Hi,
all font-face code you need to paste in layout.css.

But to change font-family in element you need to find his code. It may be in apollo13.eu, or layout.css.

STI

Hello everybody.

Where I can find the 'layout.css' file? (or You mean 'style.css' file which is placed in the main theme directory?).

I can' t handle point 3 ( pasting the name of font-family in the font options menu).
I can' t find nothing similiar to this in the font options menu ( see attachment ).

Kind regards.

Argone

Hi STI,

This screenshot is from Beach Please theme Please create a post in BP category.

With regards

STI

Oh crap. Excuse me.