Add fonts

This topic has 10 replies, 2 voices, and was last updated 9 years, 2 months ago by Sakin.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
July 9, 2015 at 4:18 pm #60755

toni
Participant

Hi Sakin,
I’m working in the website http://www.beformentera.com, and I’m interested in changing the font: my client bought the ‘Atrament’ font and wants to use it in his website.

I’ve just downloaded the child theme for Catch Box Pro. I ‘ve created a new folder called ‘Fonts’ and I’ve uploaded all the webkits created with FontSquirrel.

Which is the next step?

Thanks in advance!!!

July 9, 2015 at 7:38 pm #60764

Sakin
Keymaster

@toni: Then open your child theme style.css and add your css given by FontSquirrel. If you have stylesheet.css in your font folder then you can add the following css:
@import url('fonts/stylesheet.css');

July 10, 2015 at 4:58 pm #60816

toni
Participant

Thank you Sakin,

I added all the css’s adding the url ‘fonts’ to the style.css, but it doesn’t work.
I also added this rule, as a test:
h1, h2, h3 {
font-family: ‘atramentregular’;
font-size: 18px;
color: #ff117a;
}

July 10, 2015 at 7:37 pm #60821

Sakin
Keymaster

@toni: Can you send me your site URL and let me know what are you trying to do it. Then I can check in.

July 10, 2015 at 9:48 pm #60827

toni
Participant

Sorry Sakin, http://www.beformentera.com

Thx!!

July 10, 2015 at 9:58 pm #60828
Sakin
Keymaster
@toni: You have issue in your child theme css. Are you sure that CSS is given by FontSquirrel. There is issue with url it cannot be 'fonts'atrament_regular-webfont.eot' and should be 'fonts/atrament_regular-webfont.eot'. So, you need to replace that all. For example, replace the following css:
```
@font-face {
    font-family: 'atramentregular';
    src: url('fonts'atrament_regular-webfont.eot');
    src: url('fonts'atrament_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts'atrament_regular-webfont.woff2') format('woff2'),
         url('fonts'atrament_regular-webfont.woff') format('woff'),
         url('fonts'atrament_regular-webfont.ttf') format('truetype'),
         url('fonts'atrament_regular-webfont.svg#atramentregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
```
with this
```
@font-face {
    font-family: 'atramentregular';
    src: url('fonts/atrament_regular-webfont.eot');
    src: url('fonts/atrament_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/atrament_regular-webfont.woff2') format('woff2'),
         url('fonts/atrament_regular-webfont.woff') format('woff'),
         url('fonts/atrament_regular-webfont.ttf') format('truetype'),
         url('fonts/atrament_regular-webfont.svg#atramentregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
```
July 10, 2015 at 10:51 pm #60831

toni
Participant

I changed the apostrophe for the slash, but it’s the same.

July 11, 2015 at 2:45 pm #60847

toni
Participant

Hi Sakin,
I modified some issues and now it works, but only with h1.

July 11, 2015 at 9:20 pm #60853

Sakin
Keymaster

@toni: Can you let me know which H1 are you talking about. As When I check in your site, the H1 have been changed.

July 11, 2015 at 11:39 pm #60857

toni
Participant

It only changed the title of every page:http://beformentera.com/concept-store/
I thought it was h1, and if I add h2, h3, doesn’t work.

July 12, 2015 at 2:43 am #60861

Sakin
Keymaster

@toni: Yes, it changed all your page title as page title is H1 and yes it will work in h1 and h3 as well. I see it’s being change. So, I don’t get it what you mean.
Author

Posts