[innocentrebelsParticipant]

Greetings!

I used a Google font from the drop down list on my website. However, when I view the site from a mobile phone and from a desktop the font isn’t the same.

http://www.innocentrebels.com

Any help would be appreciated.

Thanks,

Ingrid

[Rue NelModerator]

Hello There,

Please try the following fix suggested here: https://codestag.com/fix-google-chrome-web-fonts-issue/

Please also refer to this post: https://theme.co/x/member/forums/topic/font-weight-too-thin/#post-228780

Please specify which OS you are on mobile, Android or iOS, Chrome or Safari.

Hope this helps.

[innocentrebelsParticipant]

Greetings!

Thanks for your reply.

I tried to add the css and the jv script under the areas within the Customizer.

On my jobs wordpress page, I’m able to directly change the theme in the editor. I don’t see that same option here. If I am to edit the editor, could you direct me?

None of the solutions worked. I’ve tried to view my page on Android and iOS phones. Both have the same font which isn’t my Special Elite font. Interestingly, the title page header “innocent rebels” is in Special Elite, while everything else is in a sans serif font. The only font that should be sans serif type of font (open sans) is text in the paragraph format.

Thanks,

IR

[ZeshanMember]

Hi IR,

Thanks for writing in!

I checked your website on both iPhone 5 and an Android device, both are showing fonts correctly: http://prntscr.com/6hzihf & http://prntscr.com/6hzill. Would you mind confirming the issue again? Perhaps it’s a caching issue, I’d advise clearing your browser’s cache or testing on a different browser.

Thanks.

[innocentrebelsParticipant]

Greetings!

Wow that’s my exact issue. I want my site to look the way your screen shot looks. It’s just not happening on my cell phones. I guess that’s all I can do.

I’ve deleted my cache and cookies and it remains the same sans serif font. Maybe my systems are out of date.

I’ll keep asking people I know to pull the site up on their phones.

Thanks,

IR

[Rue NelModerator]

Hi There,

Please send us some screenshots of your website from your mobile device. We’ve tried viewing your site on different mobile devices with different OS and still the fonts looks fine. It looks exactly the same as on the desktop. Try viewing your site in your mobile device with Chrome’s incognito mode or Safari’s private browser, if you are using iOS mobile device.

Thank you.

[hipneckParticipant]

I’m having a similar problem. I have one custom font showing up great on all devices, and two that won’t on my mobiles. Tested on BlackBerry and iPad.

Website: http://www.angelasboutique.com
Font that works: Overlock
Fonts that don’t show up on mobile only: Great Vibes, Lane

[Nabeel AModerator]

Hi there,

Thanks for writing in! Have you uploaded the custom fonts on the server before using them? Can you please let us know that how are you including the fonts in the website?

Thanks!

[hipneckParticipant]

Yes, I followed the instructions outlined in several posts on this site: uploaded web font kits for the 3 custom fonts I want to use to a folder on my server, used the following CSS in the Customizer (at the bottom, custom css/js spot, not Cornerstone’s css spot), and then chose/used the fonts for body/heading in the Customizer’s Typography area, and also specified in the custom headlines etc in Cornerstone:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 1, 2015 */

@font-face {
    font-family: 'great_vibesregular';
    src: url('http://angelasboutique.com/fonts/greatvibes-regular-webfont.eot');
    src: url('http://angelasboutique.com/fonts/greatvibes-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://angelasboutique.com/fonts/greatvibes-regular-webfont.woff2') format('woff2'),
         url('http://angelasboutique.com/fonts/greatvibes-regular-webfont.woff') format('woff'),
         url('http://angelasboutique.com/fonts/greatvibes-regular-webfont.ttf') format('truetype'),
         url('http://angelasboutique.com/fonts/greatvibes-regular-webfont.svg#great_vibesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'overlockitalic';
    src: url('http://angelasboutique.com/fonts/overlock-italic-webfont.eot');
    src: url('http://angelasboutique.com/fonts/overlock-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://angelasboutique.com/fonts/overlock-italic-webfont.woff2') format('woff2'),
         url('http://angelasboutique.com/fonts/overlock-italic-webfont.woff') format('woff'),
         url('http://angelasboutique.com/fonts/overlock-italic-webfont.ttf') format('truetype'),
         url('http://angelasboutique.com/fonts/overlock-italic-webfont.svg#overlockitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'overlockregular';
    src: url('http://angelasboutique.com/fonts/overlock-regular-webfont.eot');
    src: url('http://angelasboutique.com/fonts/overlock-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://angelasboutique.com/fonts/overlock-regular-webfont.woff2') format('woff2'),
         url('http://angelasboutique.com/fonts/overlock-regular-webfont.woff') format('woff'),
         url('http://angelasboutique.com/fonts/overlock-regular-webfont.ttf') format('truetype'),
         url('http://angelasboutique.com/fonts/overlock-regular-webfont.svg#overlockregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'overlock_scregular';
    src: url('http://angelasboutique.com/fonts/overlocksc-regular-webfont.eot');
    src: url('http://angelasboutique.com/fonts/overlocksc-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://angelasboutique.com/fonts/overlocksc-regular-webfont.woff2') format('woff2'),
         url('http://angelasboutique.com/fonts/overlocksc-regular-webfont.woff') format('woff'),
         url('http://angelasboutique.com/fonts/overlocksc-regular-webfont.ttf') format('truetype'),
         url('http://angelasboutique.com/fonts/overlocksc-regular-webfont.svg#overlock_scregular') format('svg');
    font-weight: normal;
    font-style: normal;

}@font-face {
    font-family: 'lane_-_upperregular';
    src: url('http://angelasboutique.com/fonts/LANEUP__-webfont.eot');
    src: url('http://angelasboutique.com/fonts/LANEUP__-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://angelasboutique.com/fonts/LANEUP__-webfont.woff') format('woff'),
         url('http://angelasboutique.com/fonts/LANEUP__-webfont.ttf') format('truetype'),
         url('http://angelasboutique.com/fonts/LANEUP__-webfont.svg#lane_-_upperregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'lane_-_poshregular';
    src: url('http://angelasboutique.com/fonts/LANEPOSH-webfont.eot');
    src: url('http://angelasboutique.com/fonts/LANEPOSH-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://angelasboutique.com/fonts/LANEPOSH-webfont.woff') format('woff'),
         url('http://angelasboutique.com/fonts/LANEPOSH-webfont.ttf') format('truetype'),
         url('http://angelasboutique.com/fonts/LANEPOSH-webfont.svg#lane_-_poshregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'lane_-_narrowregular';
    src: url('http://angelasboutique.com/fonts/LANENAR_-webfont.eot');
    src: url('http://angelasboutique.com/fonts/LANENAR_-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://angelasboutique.com/fonts/LANENAR_-webfont.woff') format('woff'),
         url('http://angelasboutique.com/fonts/LANENAR_-webfont.ttf') format('truetype'),
         url('http://angelasboutique.com/fonts/LANENAR_-webfont.svg#lane_-_narrowregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Again, the problem is only on mobile. These fonts show up on the largest two screen sizes.

[ChristianModerator]

Hey there,

X is not the one controlling your mobile view. Please uninstall mobile plugins. You’re most probably running WP Touch.

Thanks.

[hipneckParticipant]

The only plugins I have installed on this site so far are Jetpack, Akismet, and the ones that come with X 4.0. I double checked in Jetpack and I have the Mobile Theme add-on turned off now, but nothing has changed. I’ve cleared the caches twice and reloaded, but I still have the same problem. Overlock shows up but the other two don’t. Just in case, I deactivated both Jetpack and Akismet and still no fix. So it isn’t even working right when all I have on this WP install is X. That makes me think it’s a problem with @media or the way Cornerstone lets me customize headlines. ??

[Rue NelModerator]

Hello There,

You added your custom fonts but we cannot see that you have applied these fonts to the page element. We could not see any code within your page that look like these:

body {
  font-family: 'overlockregular'; 
}

If you are using custom fonts in the typography section, please try to vary each of the font to see if it works in your site.

Please let us know how it goes.

[hipneckParticipant]

OK, I just set a different font in Typography for Headings and it worked on my mobile devices. What does this mean? Because my custom fonts worked on desktop/laptop.

[hipneckParticipant]

HEY!!!! I’m so excited!!!! I set the heading back to Great Vibes after I had set it to something else, saved, refreshed, and now Great Vibes is showing up!!! All it needed was a reset from inside Customizer. Now, to figure out how to get Lane in there….

[hipneckParticipant]

OK, I’ve tracked down more info. Call me a dingdong, but Great Vibes & Overlock are included in the Google font list (I didn’t realize this) so that’s why they work from Typography… but why is it I can’t get my custom font to work on mobile when it works on desktop?

[Author]

Posts