[EricParticipant]

Hey I’ve noticed that two of my fonts that appear without any issues on the desktop aren’t appearing on tablets and mobile. To fix the issue, I tried adding these to the stylesheet:

@import url(https://fonts.googleapis.com/css?family=Dawning+of+a+New+Day);
@import url(https://fonts.googleapis.com/css?family=Special+Elite);

However unfortunately it didn’t solve my issue. As you can see the two fonts that I’m trying to fix are ‘Dawning of a New Day’ and ‘Special Elite’. Right now Special Elite is being used as the title of my blog post pages, and ‘Dawning of a New Day’ is being used as the title of my portfolio items (however it also appears on the home page).

Could you help me out with this?

Thanks!

[EricParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for updating in! The given code will only import the font. The code doesn’t stop there. You still have to add another code that will apply the font the the elements of your choice. So for example, if you want to change the font of the h1 element, you can have something like this:

@import url(https://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
@import url(https://fonts.googleapis.com/css?family=Mr+Bedfort);

h1, .h1 {
  font-family: "Mr Bedfort";
}

By the way, have you set the typography in the customizer? Please go and check this option in Appearance > Customize > Typography and set the font family for the headings, body and content, etc.

Hope this helps. Kindly let us know.

[EricParticipant]

This reply has been marked as private.

[EricParticipant]

This reply has been marked as private.

[EricParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for updating in! Could you please list the names of the fonts that you are using? I tried looking for the “Dawning of a new day”. I could not find anywhere that you added this: @import url('https://fonts.googleapis.com/css?family=Dawning+of+a+New+Day'); in your stylesheet or in the customizer. In your desktop, it might worked because you may have the font loaded in your desktop locally. On mobile it doesn’t because it is not being loaded in the page on mobile.

For best results, please add this at the very beginning of your custom css in the customizer,

@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Dawning+of+a+New+Day|Nothing+You+Could+Do');

Something like this: http://prntscr.com/efrfc8

[EricParticipant]

Hey so I tried adding the code exactly as you recommended, but then it created a number of issues (ex: for some reason my navbar customization got screwed up) and it still didn’t fix my fonts issue.

The fonts that aren’t appearing on mobile are as follows:
Dawning of a New Day
Amatic SC
Special Elite

Is there any other way to add these fonts so that they can be applied to the mobile and tablet as well? I’m not really sure how to properly add them because the last time I requested it (for ‘Nothing You Could Do’) you guys added it for me.

Let me know.

Thanks!

[Rue NelModerator]

Hello Eric,

Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

I would also add that please try to use private browsing mode or use Chrome’s incognito mode in your mobile devices and test your site again.

Please let us know how it goes.

[EricParticipant]

Hi I’m aware of the issues with using a caching plugin but I usually clear the cache after every modification and I usually check the website on both regular chrome and incognito. I’ve deactivated the plugin for now anyway just to facilitate this process, however it still doesn’t change the fact that those fonts aren’t working on mobile and tablet.

So how would I go about fixing those issues now that the caching plugin is deactivated? Let me know.

Thanks!

[Rue NelModerator]

Hello There,

Thanks for updating in! Okay, since caching is not an issue, I want you to check first the Typography settings in the customizer. Do you want Josephine Sans for the body & content and Raleway font for the headings by default?

And you said in your previous reply that;
The fonts that aren’t appearing on mobile are as follows:
Dawning of a New Day
Amatic SC
Special Elite
(https://community.theme.co/forums/topic/google-fonts-not-appearing-on-tablet-and-mobile/#post-1394163)

When I check your child theme’s style.css, all I see is this:

I also look into your page source and it seems only Josephine Sans and Raleway is loaded in the page.
http://prntscr.com/eg6q7t

I would highly recommend that you please edit your child theme’s style.css and make sure that “Dawning of a New Day”, “Amatic SC”, and “Special Elite” is imported to be loaded into the page.

Hope this helps.

[EricParticipant]

Hey to answer your first question, yes I want Josephine Sans for the body & content and Raleway font for the headings by default. I just want to be able to use the other fonts as well.

I added the three fonts using the @import within the stylesheet, but it still hasn’t resolved my issue on mobile and tablet. Is there anything else I should be adding?

Thanks

[Rue NelModerator]

Hello There,

Thanks for updating in! When checking your child theme’s style.css, I am still seeing this:

http://www.ericbishara.com/wp-content/themes/x-child/style.css

Please edit it and add this instead:

@import url('https://fonts.googleapis.com/css?family=Dawning+of+a+New+Day');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
@import url('https://fonts.googleapis.com/css?family=Special+Elite');

Please clear your browser cache or use Chrome’s incognito mode and test your site again. If you have a caching plugin, please clear the plugin cache also. And make sure that your server cache is being regenerated so that all the latest changes will be applied.

Hope this helps.

[EricParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for updating in! It will still not work because when you check your child theme’s style.css file, your changes were not there:

http://www.ericbishara.com/wp-content/themes/x-child/style.css

So here is an interesting thing in your site. I have deleted the child theme, Appearance > Themes, I noticed that the child theme’s style.css file is still there. If you noticed I have added something in child theme’s style.css. It should have this:

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

@import url(https://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
@import url(https://fonts.googleapis.com/css?family=Mr+Bedfort);
@import url(https://fonts.googleapis.com/css?family=Dawning+of+a+New+Day);
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
@import url(https://fonts.googleapis.com/css?family=Special+Elite);

/* Added by X Staff */
/* ============================================================================= */

Now if you compare it to the actual file in your site here:
http://www.ericbishara.com/wp-content/themes/x-child/style.css

the contents were so different. I am suspecting that there is something wrong with your hosting or caching that needs to be investigated.

[Author]

Posts