[Mr.alrikssonParticipant]

I just does not work for me followed different threads before but it does not change the headers.

what should I add in custom CSS more than this:

@font-face {
font-family: ‘folks-heavyregular’;
src: url(‘Folks-Heavy-webfont.eot’);
src: url(‘Folks-Heavy-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘Folks-Heavy-webfont.woff’) format(‘woff’),
url(‘Folks-Heavy-webfont.ttf’) format(‘truetype’),
url(‘Folks-Heavy-webfont.svg#folks-heavyregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

[RahulModerator]

Hey There,

Thanks for writing in!

Regretfully, at this time I am not entirely certain what it is you’re trying to do.
If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do. We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks for understanding!

[Mr.alrikssonParticipant]

Add an external font

[JadeModerator]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Mr.alrikssonParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for prodiving the url of your site. Your code will not work because

#1] It does not have the correct font file path. The font file should be upload in your child theme like

https://www.example.com/wp-content/themes/x-child/fonts/font-file.ttf

#2] You should add the code at the very first line above any other custom css. For example:

@font-face {
    font-family: 'folks-heavyregular';
    src: url('https://www.example.com/wp-content/themes/x-child/fonts/Folks-Heavy-webfont.eot');
    src: url('https://www.example.com/wp-content/themes/x-child/fonts/Folks-Heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.example.com/wp-content/themes/x-child/fonts/Folks-Heavy-webfont.woff') format('woff'),
         url('https://www.example.com/wp-content/themes/x-child/fonts/Folks-Heavy-webfont.ttf') format('truetype'),
         url('https://www.example.com/wp-content/themes/x-child/fonts/Folks-Heavy-webfont.svg#folks-heavyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: 'folks-heavyregular';
}

.other-css {
  // some styling
}

@media(max-width: XXpx ){
  .other-css {
    // some styling
  }
}

For your reference, please check out this thread: https://community.theme.co/forums/topic/custom-font-2/#post-142444, https://community.theme.co/forums/topic/how-do-i-add-my-own-font-and-use-everywhere/#post-56415

Hope this helps.

[Author]

Posts