How can import a new font family to XTheme

Support
#1

I want Gotham font family on my site, and i added it via

/* Gotham Font */
@font-face {
font-family:‘Gotham’;
src: url(‘https://toothctemplate.wpengine.com/fonts/webfont.eot’);
src: url(‘https://toothctemplate.wpengine.com/fonts/webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘https://toothctemplate.wpengine.com/fonts/webfont.woff’) format(‘woff’),
url(‘https://toothctemplate.wpengine.com/fonts/webfont.ttf’) format(‘truetype’),
url(‘https://toothctemplate.wpengine.com/fonts/webfont.svg#webfontitalic’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-weight: 300 !important;
}

div {
font-family:‘Gotham’;
}

in the theme options css, it worked on that computer, but didn’t work on other computers. Also it only picked up one weight, i want the entire font famlily. Is there a way that i can import to the site.

#2

Hello Grant,

Thanks for writing in!

When you use @font-face, you will have to make sure that all of the font files were uploaded into your server or else it will not exists thus will not display on other computers. So if your directory is https://toothctemplate.wpengine.com/fonts/ then all of the font files should be uploaded in the WP installation {wp-root}/fonts/ folder.

I would highly suggest that you upload the fonts in your child theme’s folder /wp-content/themes/x-child/fonts/ and then you will have to update your custom css and make use of this:

/* Gotham Font */
@font-face {
  font-family:'Gotham';
  src: url('https://toothctemplate.wpengine.com/wp-content/themes/x-child/fonts/webfont.eot');
  src: url('https://toothctemplate.wpengine.com/wp-content/themes/x-child/fonts/webfont.eot?#iefix') format('embedded-opentype'),
  url('https://toothctemplate.wpengine.com/wp-content/themes/x-child/fonts/webfont.woff') format('woff'),
  url('https://toothctemplate.wpengine.com/wp-content/themes/x-child/fonts/webfont.ttf') format('truetype'),
  url('https://toothctemplate.wpengine.com/wp-content/themes/x-child/fonts/webfont.svg#webfontitalic') format('svg');
  font-weight: normal;
  font-style: normal;
  font-weight: 300 !important;
}

div {
  font-family:'Gotham';
}

Please let us know how it goes.

#3

I found an alternate solution for it, but in another article you guys mentioned xtheme will support .woff or .woff2 files. I tried it and didn’t work.

#4

Also, after the new update by default all the columns are margin-less. How can i add equal amount space between columns.

#5

Hi Grant,

Please see the tutorial provided here on how to upload and use custom font in the Font Manager.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

If the issue persists, please provide us the site URL and login credentials in a secure note so we can take a closer look.

Thanks,

#6

Thanks for the video, i watched and tried it, the theme didn’t support woff and woff-2 format. Also please tell me how can i add space between columns

#7

Hi Grant,

You mean you cant upload the woff or woff2 file on the Media Library? Please do testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Some Wordpress setup restricts uploading certain file types in Media Library for security reasons (and that includes woff & woff2), so if the plugin conflict test did not work, please do the suggestion provided here.

You can utilize the Gap width and Gap height option of the ROW to space out the Columns

Layout Tricks: Using Column Gaps as Dividers

Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.