Upgrading from X to Pro - font lost

[iamwithU]

Hello,
I’ve upgraded to Pro and activated Pro Child theme. But the font of some webpages is missing.

I recall that in the past I had installed a font called, “niconne” into X. I thought it should be in the X theme child style css page, but although I re-activated my X child and looked there, I can’t find it. Can you guide me how to find that in my old X theme - I suppose I can just copy that into Pro?

[basanta]

Hi There,

Thanks for writing in!

We are not sure where you have written the code. If you have added the code to the Theme option -> CSS then it should be there.
If you have added to child theme it must be there because update won’t overwrite any child theme code.

You should check your old backup and confirm where is the code.

Thanks

[iamwithU]

Can you kindly advise me how to install custom font into child theme? Perhaps I can retrace my steps and find the niconne font.

I recall it was a long step of going to a website to copy the font and install it somewhere in my X theme.

I don’t know how to check my “old backup & confirm where is the code” as suggested by you.

[iamwithU]

I found out the answer by searching for Friech’s advice previously. I summarise as follows for the benefit of other beginners:

a) go to fonts.google.com & copy the 2 segments there (under “Import” & “Specify in CSS”)

b) go to my WP Dashboard > Appearance > Editor > Pro-Child Theme: Stylesheet and paste:

@import url(‘https://fonts.googleapis.com/css?family=Niconne’);

.niconne {
font-family: ‘Niconne’, cursive;
}

c) Then go to the “headline” of the webpage and in the “class” box, add “niconne” inside to apply this font.

Big thanks to Friech!

[jade]

You’re most welcome.

[iamwithU]

O boy, I just realise that while I manage to restore the font, it looks ok on my mobile phone. But on any device bigger than mobile, the font is not the “niconne” I intended.

Could you be so kind to let me know why is it that the font is “niconne” for the mobile, but on bigger devices, the font became something else? (i think the font became the default font.) How can I make sure the same font is used for all devices?

[mldarshana]

Hi There @iamwithU

Please update your CSS rule as follows and re-test your issue again.

.niconne {
    font-family: 'Niconne', cursive !important;
}

Make sure to purge your server cache and clear your browser cache before testing.

Thanks!

[iamwithU]

Dear mldshana,
Mind telling me where I should insert the CSS rule? Just to make sure I do it correctly.

[paul.r]

Hi,

You can add it in Theme Options > CSS

See screenshot

[iamwithU]

Awesome Paul. Thanks for your prompt response! Have a good day

[paul.r]

You’re welcome!