[tarekrParticipant]

Hello,

I have used Book Antiqua font on my page https://tarekrabaa.com/about/.
I used cornerstone to add Text element with HTML code to have Book Antiqua font. It works on Desktop and when viewing the Text using the Desktop to see how it looks on phone screen I see the text normally with Book Antiqua.

However the same text when seen by a Mobile device it is not at all Book Antiqua but it is still taking the default font.

How to have Book Antiqua responsive?

Regards,
Tarek

[FriechModerator]

Hi Tarek,

Thanks for writing in! It seems the site is not loading a font named “Book Antiqua” in the first place. Would you mind to clarify how did you install the font? I am not seeing “Book Antiqua” on Google font. I think the reason why the font works on desktop is because it was installed on your computer so does on mine.

We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[tarekrParticipant]

Hi,

I used <h5 style=”font-family: ‘Book Antiqua’;”> on Cornerstone.
Can i install this font on X- Theme?

Regards,
Tarek

[tarekrParticipant]

To be more precise, I want to use different type of fonts in my text in HTML and CSS and not the whole body of the page.
This what i tried to do but it is not showing on my mobile phone.

[FriechModerator]

Hi Tarek,

That is how you apply the font, but you need to install the font first (or request to 3rd party site like https://fonts.google.com) before you can use the font. Do you have the font files? if yes, please follow this post: https://community.theme.co/forums/topic/menu-font-changes/page/2/#post-881256 on how you can add font to your site.

Or is it ok if we use this Book Basic font instead (it is identical to book antiqua)? https://fonts.google.com/specimen/Gentium+Book+Basic If so, you can add this on your child theme’s style.css file.

@import url('https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700');

Then update your code to:

<h5 style="font-family: 'Gentium Book Basic', serif;">

Let us know how it goes.

Thanks.

[tarekrParticipant]

Problem solved.

Thx very much it works now.
I used the Book Basic font as you proposed.
It works and my problem is solved.

Thx again.

[tarekrParticipant]

Hi Friech,

My last question is how can i get the font files?

Rgds

[FriechModerator]

Glad you sorted things out, try looking at https://www.fontsquirrel.com/ or http://www.1001freefonts.com/ or other sites alike.

Thanks.

[tarekrParticipant]

Hi Friech,

1. Does the fonts from google make the page loading speedlower?
2. Can i add many lines for different font using @import? for example adding to CSS style the follwoing:

@import url(‘https://fonts.googleapis.com/css?family=Cormorant:400,400i,700,700i’);
@import url(‘https://fonts.googleapis.com/css?family=Cormorant:300i’);
@import url(‘https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700’);
@import url(‘https://fonts.googleapis.com/css?family=Playball:400,700’);
@import url(‘https://fonts.googleapis.com/css?family=Bentham:400,700’);
@import url(‘https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911:400’);

Does it work or i need to select all the fonts in one shot from Google fonts and add them on one line only?

Many Regards,

[FriechModerator]

Hi There,

Both will work, But the one linear @import is more efficient as it will request all the fonts at-once.

Yes, it does affect the loading of the page somehow if you load lots of different font (but not really slow, like a noticeable slow).

You can reduce the load time of a font, if you just select the arsenal that you need.

Cheers!

[tarekrParticipant]

Thx for your precious help.

[JoaoModerator]

Let us know if you need help with anything else.

Joao

[Author]

Posts