Adding Custom Font X Pro

Support
#1

Hello,

We want to upload our own webfont. Here is what I have in the child theme’s style.css:

@font-face {
    font-family: 'Compacta Black';
    src : url('./fonts/compacta-black-bt_1-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Compacta Bold';
    src: url('./fonts/compacta_bold_bt-webfont.woff') format('woff');
    }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
	font-family: 'Compacta Black', 'Lato',sans-serif !important;
	font-weight:normal;
}

I’ve also uploaded the fonts to the child theme font folder http://f8d.1de.myftpupload.com/wp-content/themes/child-pro/fonts/compacta_bold_bt-webfont.woff

Not working, thanks for your help!

Alvin

#2

Hi there,

To have a cross-browser experience regarding the custom fonts you will need to upload all font file types and add them in style.css. For more information:

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):

@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:// your website . 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;
}

Thank you.

#3

I’ve tried all of these settings, in the child theme and on customiser css and can’t get the font to show at all…

Trying to get Aleo to be the header font everywhere (on the site regularly and customer headers)

#4

Hi there,

Please try this:

@font-face {
    font-family: 'aleoregular';
    src: url('http://etcc.jigsawenterprises.com/wp-content/themes/pro-child/fonts/Aleo-Regular-webfont.eot');
    src: url('http://etcc.jigsawenterprises.com/wp-content/themes/pro-child/fonts/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://etcc.jigsawenterprises.com/wp-content/themes/pro-child/fonts/Aleo-Regular-webfont.woff2') format('woff2'),
         url('http://etcc.jigsawenterprises.com/wp-content/themes/pro-child/fonts/Aleo-Regular-webfont.woff') format('woff'),
         url('http://etcc.jigsawenterprises.com/wp-content/themes/pro-child/fonts/Aleo-Regular-webfont.ttf') format('truetype'),
         url('http://etcc.jigsawenterprises.com/wp-content/themes/pro-child/fonts/Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.h-custom-headline span {
    font-family: 'aleoregular' !important;
}

Please also reset your password because it was visible publicly before I moved it to Secure Note.

Hope this helps.

#5

awesome! Thanks that worked!!!..

sorry I thought I had hidden the login - how do I do the secure note thing for future reference?

#6

You’re welcome!

#7

I installed the X child theme as said and I got this error

Fatal error: Cannot redeclare class Menu_Item_Custom_Fields_Map in /home2/emerald/public_html/mwssnew/wp-content/plugins/cornerstone/includes/menu-item-custom-fields/menu-item-custom-fields-map.php on line 19

#8

Hi @cessna309,

Do you have two copies of cornerstone? That shouldn’t happen since it’s a child theme. Please start a new thread and provide your site’s URL, Admin, and FTP login credentials in a secure note, then I’ll check the details of the error.

Thanks!