[toni]

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!!!

[Sakin]

@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');

[toni]

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;
}

[Sakin]

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

[toni]

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

Thx!!

[Sakin]

@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;
}

[toni]

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

[toni]

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

[Sakin]

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

[toni]

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.

[Sakin]

@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