[JohanschackParticipant]

Hi,

I have two questions that i hope you can answer 🙂

1) I’m using the Ethos demo to create my website. for some reason, the second section, showing a parallax image doesn’t appear on safari. It does appear in all other browsers. this has been tested on two computers with equal results.

2) I’m trying to use a font on a heading that isn’t in the font folder. For a previous font i added it with the css code @import and then some custom style. but that font was already in the x font folder. What are the steps if i want to add the font from google fonts: https://www.google.com/fonts/specimen/Wallpoet ? (hope it makes sense)

Best regards,
Johan

[RupokMember]

Hi Johan,

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.

[JohanschackParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing back.

#1. You are using a different language to name your image that couldn’t be recognized by Safari :

Image name : hjemmeside-på-mac-mørk-44.png

Full URL : http://jvfirst.dk/wp-content/uploads/2016/04/hjemmeside-pa%CC%8A-mac-m%C3%B8rk-44.png

Kindly rename the image to English or a recognizable language and upload again.

#2. Follow this to add your own Google Font – https://community.theme.co/forums/topic/how-to-add-custom-font/#post-211687

Hope this makes sense.

Cheers!

[JohanschackParticipant]

Hey,

#1 Duuh, stupid me 😀

#2 Regarding the font, I have already tried this. I’ve even tries it with multiple fonts to check that it wasn’t a mistake on one of them.

In the CSS I’ve added:
@import url(https://fonts.googleapis.com/css?family=Wallpoet);

and in the style box I’ve added:
font-family: 'wallpoet', cursive;

I have also tried with “normal” instead of cursive.

What more can I do?

[RadModerator]

Hi there,

According to the rule about @import, it should appear before any CSS.

Instead of placing it along with other CSS, I added this code to your customizer’s custom javascript.

jQuery ( function( $ ) {

$('head').append('<style>' +

'@import url(//fonts.googleapis.com/css?family=Wallpoet);'+
'@import url(//fonts.googleapis.com/css?family=Poiret+One);'+
'@import url(//fonts.googleapis.com/css?family=Black+Ops+One);'+
'@import url(//fonts.googleapis.com/css?family=Indie+Flower);'+

'</style>');

} );

Cheers!

[JohanschackParticipant]

I love it!

Many thanks!!!

[ChristopherModerator]

Glad we could help you with this.

[Author]

Posts