[Anthony TParticipant]

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

[HoustonParticipant]

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.

[Paul RModerator]

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

[Anthony TParticipant]

Thanks!!! I’ll try it.

[CousettMember]

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

[Andy FParticipant]

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

[RadModerator]

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.

[Andy FParticipant]

Ok thanks, I’ll give it a go.

[ChristianModerator]

You’re welcome Andy.

[peterjitg@yahoo.comParticipant]

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.

[FriechModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[peterjitg@yahoo.comParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Upon checking your site you didn’t put the code in style.css file, please add following code to style.css file:

@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;
}

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

Thanks.

[peterjitg@yahoo.comParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi there,

Please remove the spaces from the file name it should not contain any space, for example change the file name from this exljbris – MuseoSlab-300.otf to exljbris-MuseoSlab-300.otf then your file path will become http://www.samsungupdate.com/testserver/wp-content/themes/x/framework/fonts/museo/exljbris-MuseoSlab-300.eot without spaces.

Don’t forget to change the path in the code after fixing the file names. Let us know how this goes!

[Author]

Posts