Widget font type change

[solusarena]

I have looked all around for an answer as to how I can change the font type in the widgets on my site but have had no luck finding an answer. Can you help? I want to make the widget titles into the font type - Garton. I would also like to change the size and color. Is there some easy code that I can insert into custom styles? Http://Eco-elementsdesign.com
Thanks.

[Colin]

Are you certain that all your visitors will have the Garton font? AFAIK it is not a standard one so you will need to embed the font and then just style the H3 element in Custom CSS.

[solusarena]

Can you tell me how to embed the font? Sorry I've never done a website before. Also can you tell me how to style the h3 element. I appreciate your help. You're right about not all visitors seeing the font because I found the code to change post title font and it showed on my iPad but not laptop. Thanks again.

[sayontan]

I have done this on my personal site, http://mynethome.net/blog. You can see the instructions here: viewtopic.php?f=4&t=4908&p=20209&hilit=mynethome+font+face#p20209. There is a CSS capability called "font-face" that can help you here.

[solusarena]

Sayontan, thank you for the reply. I am choosing to use the custom style sheet to make the changes, but I'm unsure as to the "http" information I need to include. Is this a link to the each of the widgets that I want to change or is it a link to the actual font style. I downloaded my font from fontsquirrel. Thank you! http://eco-elementsdesign.com

@font-face {
font-family: 'QlassikMediumRegular';
src: url('http://mysite.com/wp-content/fonts/Qlassik_TB-webfont.eot?') format('eot'),
url('http://mysite.com/wp-content/fonts/Qlassik_TB-webfont.woff') format('woff'),
url('http://mysite.com/wp-content/fonts/Qlassik_TB-webfont.ttf') format('truetype'),
url('http://mysite.com/wp-content/fonts/Qlassik_TB-webfont.svg#webfontkkbjEnfA') format('svg');[/color]
font-weight: normal;
font-style: normal;
}

h1, h2, h3, h4, h5, h6, .blogtitle {
font-family: QlassikMediumRegular, Arial, sans-serif;
}

[solusarena]

Here is what I posted in the custom styles section and the font is not showing up. What am I doing wrong? Thanks for any help.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 14, 2011 06:54:51 PM America/New_York */



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

}

[Colin]

The url in that code assumes that the font files are in the folder where the the CSS is being called from. You need to correct the url to point to the correct font location.

[solusarena]

Removed post.

[sayontan]

Don't use FTP - use HTTP. Put the files somewhere in your WP installation. Using a separate folder called "fonts" under wp-content is typically a good idea.

[solusarena]

Removed post.