Docs

[grenlanddata]

Hello.

I want to change the font on my webpage, for pretty much all text.

I see there are some options to change the font under appearance, but the font i want is not in the list.

I want to change it all to Helvetica Neue ltd stf.

Thanks

[Paul R]

Hi,

Thanks for writing in!

You can change the font of you site under typography in the customizer (appearance > customize)

but if your font is not listed, you need to add it manually by downloading the font files and uploading it to your site.

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 custom > css box in the customizer.

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

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

Change yoursite.com with your domain and HelveticaNeue 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.

[Author]

Posts