Docs

[noznewman]

Hi,

I’ve plugged in TypeKit in order to use Proxima as my main headings font.

However, I would also like to use another custom font (Hello Beautiful) for certain headings too.

I know I need to add the @font-face font code to my child theme Style.css via ftp://noznewman%2540drive-marketing.co.uk@ftp.gridhost.co.uk/public_html/wp-content/themes/x-child/style.css

To use Proxima I’ve set this via customizer – how do I use the Hello Beautiful font on headings?
Do I use the id, class, style on page css in cornerstone?

Thanks
Paul

[Christian]

Hey Paul,

You need CSS to use self-hosted font to your headlines. Please add the code below in your Appearance > Customize > Custom > Global CSS

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: "FONT_FAMILY_NAME"
}

You can also add font-family: "FONT_FAMILY_NAME"; in the Style field of an element.

Thanks.

[noznewman]

This reply has been marked as private.

[noznewman]

This reply has been marked as private.

[noznewman]

Sorry to bother again, where in the folder structure do I upload the font files if I’m using a child theme?

[Rahul]

Hey There,

Thanks for writing back!

You can use the following path to upload font files.

site.com/wp-content/themes/x-child/fonts

Hope this helps!

[noznewman]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please follow steps below on how to add custom font

1. Set-up child theme – https://theme.co/x/member/kb/how-to-setup-child-themes/
2. Convert your font file to these extensions (eot, woff2, woff,ttf svg)
you can try to convert on this site http://www.font2web.com/
3. create fonts folder in your child theme directory (wp-content/themes/x-child/fonts)
4. Upload all font files to your fonts folder(wp-content/themes/x-child/fonts) using ftp
5. Add the code below in your child theme’s style.css file:

@font-face {
  font-family: 'YourFontName';
  src: url('http://example.com/wp-content/themes/x-child/fonts/YourFontName.eot'); /* IE9 Compat Modes */
  src: url('http://example.com/wp-content/themes/x-child/fonts/YourFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://example.com/wp-content/themes/x-child/fonts/YourFontName.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://example.com/wp-content/themes/x-child/fonts/YourFontName.woff') format('woff'), /* Pretty Modern Browsers */
       url('http://example.com/wp-content/themes/x-child/fonts/YourFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://example.com/wp-content/themes/x-child/fonts/YourFontName.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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

Change example.com with your domain and YourFontName with the filename of your font.

For more information please refer to this link https://css-tricks.com/snippets/css/using-font-face/

Hope that helps.

[noznewman]

This reply has been marked as private.

[Christopher]

Hi there

Please generate woff2 format using fontsquirrel tool https://www.fontsquirrel.com/tools/webfont-generator

Hope it helps.

[Author]

Posts