Adding Fonts – Themeco Community

Adding Fonts

Anthony T — Wed, 06 Aug 2014 03:00:45 +0000

Hi,

How do I add a custom font? I have the font files on my PC and would like to use them on the site.

Thanks

Reply To: Adding Fonts

Houston — Wed, 06 Aug 2014 03:12:43 +0000

Not sure if this will help, but I did this once using this method.
http://stackoverflow.com/questions/7961721/how-do-i-install-a-custom-font-on-an-html-site

Good Luck.

Reply To: Adding Fonts

Paul R — Wed, 06 Aug 2014 12:43:24 +0000

Hi Anthony,

First To make your font compatible to most browsers you may convert your font in http://www.font2web.com/
download the files and upload them to fonts folder in your theme directory

To do it in X put these line of codes in customizer >custom >css .


@font-face {
    font-family: 'myFirstFont'; 
    src: url('http://www.yoursite.com/fonts/webfont.eot');
    src: url('http://www.yoursite.com/fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.yoursite.com/fonts/webfont.woff') format('woff'),
         url('http://www.yoursite.com/fonts/webfont.ttf') format('truetype'),
         url('http://www.yoursite.com/fonts/webfont.svg#webfontitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

Don’t forget to change the url and font filename.

You can then use the font like this


div {
    font-family: myFirstFont;
}

Thanks

Reply To: Adding Fonts

Anthony T — Thu, 07 Aug 2014 16:31:29 +0000

Thanks!!! I’ll try it.

Reply To: Adding Fonts

Cousett — Thu, 07 Aug 2014 17:06:11 +0000

Glad we were able to help. 🙂 Have a nice day.

Reply To: Adding Fonts

Andy F — Sat, 10 Jan 2015 10:28:21 +0000

Hi there, I am trying to add a custom font to the X theme. I am using Ethos 1. I have added the various web fonts to my server and copied the code above to the custom CSS section in customizer and added the links to the files where appropriate.

However I can’t see the font in the typography dropdown which is where I want it to be. I want to use my new font for the logo and headings so I need it to be added in the typography dropdown. Is this possible using the process above or do I need to do something different.

Thanks in advance.

Andy

Reply To: Adding Fonts

Rad — Sun, 11 Jan 2015 02:30:30 +0000

Hi Andy,

Thanks for posting in.

Font dropdown selection is just for google fonts. The selection pulls font from google then generate styling for the theme. Like styling for head lines, logo, text, and etc.

And since you’re using custom font, you will have to add your own styling for head lines, logo, text, and etc.

Eg. h1.entry-title { font-family : 'myFirstFont'; }

Hope this helps.

Reply To: Adding Fonts

Andy F — Sun, 11 Jan 2015 13:58:39 +0000

Ok thanks, I’ll give it a go.

Reply To: Adding Fonts

Christian — Mon, 12 Jan 2015 05:16:36 +0000

You’re welcome Andy.

Reply To: Adding Fonts

peterjitg@yahoo.com — Thu, 28 May 2015 03:26:16 +0000

If I may push this post up, I’m dealing with the same issue, I’ve done everything as instructed above but my title font still does not change. Here’s my code:

@font-face {
    font-family: 'museo'; 
    src: url('http://www.samsungupdate.com/testserver/wp-content/themes/x/framework/fonts/museo/exljbris - MuseoSlab-300.eot');
    src: url('http://www.samsungupdate.com/testserver/wp-content/themes/x/framework/fonts/museo/exljbris - MuseoSlab-300.eot?#iefix') format('embedded-opentype'),
         url('http://www.samsungupdate.com/testserver/wp-content/themes/x/framework/fonts/museo/exljbris - MuseoSlab-300.woff') format('woff'),
         url('http://www.samsungupdate.com/testserver/wp-content/themes/x/framework/fonts/museo/exljbris - MuseoSlab-300.ttf') format('truetype'),
         url('http://www.samsungupdate.com/testserver/wp-content/themes/x/framework/fonts/museo/exljbris - MuseoSlab-300.svg#webfontitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

Then below, I assigned it like this:

.entry-title {
  line-height: 1.4;
  font-family : 'museo';
}

However, it still does not work. Am I missing something? Please help.