[calidreamworksParticipant]

Hi, I have a custom font i want to use in a section of my site. I uploaded a custom font to the ~/public_html/fonts/

The font resources i have are:
style.css
font-solid.eot
finance-solid.svg
finance-solid.ttf
finance-solid.woff

I’ve uploaded them into the /fonts directory in public_html.

basically the fonts are icons. I could use sag or png files but would rather use the font for ease of editing and uniformity free of any graphics program.

I put the CSS on the page css in cornerstone. I don’t know if i should have put it in style.css

can you help me get this setup so i can call the font with a css in the specific sections i want it to appear.

Thanks,
🙂

[RupokMember]

Hi there,

Here goes the step by step guide to add custom webfont to your site.

You can add custom fonts to your website using CSS3 @font-face rule. To do this, please review this article: http://css-tricks.com/snippets/css/using-font-face/

Basically you need to add the following code in your child theme’s style.css file (if you haven’t installed a child theme, please visit this to install Child Theme):

@font-face {
  font-family: 'MyWebFont';
  src: url('path-to-your-font-directory/font_name.eot');
  src: url('path-to-your-font-directory/font_name.eot?#iefix') format('embedded-opentype'),
       url('path-to-your-font-directory/font_name.woff') format('woff'),
       url('path-to-your-font-directory/font_name.ttf')  format('truetype'),
       url('path-to-your-font-directory/font_name.svg#svgFontName') format('svg');
}

Replace MyWebFont with the name of your font, path-to-your-font-directory with your fonts directory URL (e.g, http://yourwebsite.com/fonts) and font_name with your font’s name.

Next, whenever you need to use this font, simply use “MyWebFont” (or your custom font name), e.g:

body {
   font-family: 'MyWebFont', sans-serif;
}

To use this for specific element, let’s place font-family: 'MyWebFont', sans-serif; on the Style field.

Hope this helps. 🙂

Thank you.

[Author]

Posts