Topic: Custom fonts | Themeco Community

Tagged: x

1 2 →

Author

Posts
September 27, 2016 at 9:49 am #1192377
VanderWalMedia
Participant
Can you help me out here? Followed instructions. Used fonts2web, uploaded fonts to ftp everything.

What am i doing wrong?
```
/** Custom fonts **/
@font-face {
  font-family: 'InterstateRegular';
  src: url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.eot');
  src: url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.eot?#iefix') format('embedded-opentype'),
       url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.woff') format('woff'),
       url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.ttf')  format('truetype'),
       url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.svg#svgFontName') format('svg');
}
@font-face {
  font-family: 'InterstateBold';
  src: url('http://ftp.liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.eot');
  src: url('http://ftp.liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.eot?#iefix') format('embedded-opentype'),
       url('http://ftp.liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.woff') format('woff'),
       url('http://ftp.liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.ttf')  format('truetype'),
       url('http://ftp.liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.svg#svgFontName') format('svg');
}
@font-face {
  font-family: 'InterstateLight';
  src: url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.eot');
  src: url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.eot?#iefix') format('embedded-opentype'),
       url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.woff') format('woff'),
       url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.ttf')  format('truetype'),
       url('http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.svg#svgFontName') format('svg');
}
  body {
    font-family: 'InterstateLight' !important;
}
  h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "InterstateBold";
}
```
Cheers
September 27, 2016 at 9:51 am #1192379

VanderWalMedia
Participant

.

September 27, 2016 at 10:14 am #1192429

Christian
Moderator

Hey there,

Your URLs are not correct. Please check or seek help from a web developer to correct the URLs for you.

Thanks.

September 27, 2016 at 3:44 pm #1192894

VanderWalMedia
Participant

I don’t understand.

That’s the path where the fonts are located.

I deleted the http://ftp.domain url

September 27, 2016 at 6:29 pm #1193092

Darshana
Moderator

Hi there,

Can you please provide is with a sample page URL? so that we can check.

Thanks!

September 28, 2016 at 4:39 am #1193626

VanderWalMedia
Participant

http://www.liva-meubelen.nl/liva-collectie/living-model-rose/

September 28, 2016 at 5:26 am #1193656

Christopher
Moderator

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

September 28, 2016 at 6:12 am #1193697

VanderWalMedia
Participant

This reply has been marked as private.

September 28, 2016 at 6:38 am #1193733

Christopher
Moderator

Hi there,

I updated your code and added it under child theme’s style.css file. Please check your site and let us know if it loads font correctly.

Please remove @font-face codes from customizer.

Hope it helps.

September 28, 2016 at 6:54 am #1193747

VanderWalMedia
Participant

Now it’s using the font Typography in Customizer again. I need it to use Interstate.

CSS says its using InterstateLight for body, but it doesn’t look anything like the font.

September 28, 2016 at 7:27 am #1193778

Christian
Moderator

In the console, there is this error:

4www.liva-meubelen.nl/:1 Font from origin ‘http://liva-meubelen.nl’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.liva-meubelen.nl’ is therefore not allowed access.

Please contact your web host to fix the Cross-Origin Resource Sharing issue. They should be able to do that.

Also, you’re using Autoptimize which might cause conflicts. Please deactivate all third party plugins while we investigate.

And, can you give us the URL of your fonts? They should be accessible in the web browser. For example, this URL:

http://liva-meubelen.nl/public_html/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.eot

returns a 404 page not found. Try removing public_html

Some of your URLs have this http://ftp.liva-meubelen.nl. That is not accessible by the web browser (see attachment).

Thanks.

September 28, 2016 at 8:30 am #1193903
VanderWalMedia
Participant
Contacted the host.

As for ftp, i already deleted that so that won’t be a problem. You added the correct code to child’s style.css.
If I copy paste a path of a font into the addressbar it downloads the font.

I dont get 404’s.

I have deactivated every third party plugin and cloudflare is in development mode.

Here are the url’s:
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.eot
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.eot
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.woff
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.ttf
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.svg

http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.eot
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.eot
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.woff
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.ttf
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.svg

http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.eot
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.eot
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.woff
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.ttf
http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.svg

And here is how you put it in my child’s style.css:
```
@font-face {
  font-family: 'InterstateRegular';
  src: url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.eot');
  src: url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.eot?#iefix') format('embedded-opentype'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.woff') format('woff'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.ttf')  format('truetype'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateRegular.svg#svgFontName') format('svg');
}
@font-face {
  font-family: 'InterstateBold';
  src: url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.eot');
  src: url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.eot?#iefix') format('embedded-opentype'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.woff') format('woff'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.ttf')  format('truetype'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateBold.svg#svgFontName') format('svg');
}
@font-face {
  font-family: 'InterstateLight';
  src: url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.eot');
  src: url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.eot?#iefix') format('embedded-opentype'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.woff') format('woff'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.ttf')  format('truetype'),
       url('http://liva-meubelen.nl/wp-content/themes/x-child/framework/views/renew/fonts/InterstateLight.svg#svgFontName') format('svg');
}
```
September 28, 2016 at 8:31 am #1193905
VanderWalMedia
Participant
I added this to the style.css:
```
body {
    font-family: 'InterstateLight' !important;
}
  h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "InterstateBold" !important;
}
```
Thanks for effort btw
September 28, 2016 at 8:34 am #1193910

VanderWalMedia
Participant

Here is a printscreen of the path in Cyberduck

September 28, 2016 at 9:31 am #1194001

VanderWalMedia
Participant

The font works on Safari now but not on Chrome and Firefox.
Author

Posts

1 2 →

<script> jQuery(function($){ $("#no-reply-1192377 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>