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

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.

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

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.

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

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.

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

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!

/* 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.

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

Thanks.