New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Site Keeps falling back to serrif font on mobile, but not desktop?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Back to forum
    Posted in: Neighborhood
  • August 18, 2015 at 6:53 pm #205101
    MarieWorks
    Member
    Post count: 225

    Hi,

    our site keeps falling back to the default serrif font on mobile.

    However on desktop it continues to run our custom font (larsseit) which is added using css in theme options (as instructed on this forum) css as below:

    @font-face {
font-family: Larsseit;
src: url(https://www.www.reikokaneko.co.uk/wp-content/themes/neighborhood-child/fonts/2E6300_1_0.woff
);
font-weight: normal ;
}
:not(i) {
    font-family: 'Larsseit' !important;
}
ul.products li.product .price, .woocommerce ul.products li.product .price {
    
    font-size: 14px !important;
}

    Any help would be greatly appreciated

    Thanks

    Chris

    August 18, 2015 at 7:07 pm #205102
    MarieWorks
    Member
    Post count: 225

    We also keep getting errors like that shown in the screenshot below – anyone know why this is???

    Attachments:
    You must be logged in to view attached files.
    August 19, 2015 at 8:44 am #205234
    MarieWorks
    Member
    Post count: 225

    Pages also keep loading with white font (see screenshot)

    If you click the stop loading page in the address bar the text then drops in black

    Any ideas?

    Please help

    Attachments:
    You must be logged in to view attached files.
    August 20, 2015 at 1:18 pm #205777
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    It likely works on your desktop because you have the fonts installed on your machine and not on mobile.

    You are not loading all the font variations (.eot,.woff2,.ttf,.svg) also, I listed what is needed for each browser device:

    @font-face {
  font-family: 'Larsseit';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

    You can also provide a better fallback font stack like so:

    body {
  font-family: 'Larsseit', Fallback, Helvetica, sans-serif;
}

    Thanks,
    David.

    August 20, 2015 at 1:24 pm #205780
    MarieWorks
    Member
    Post count: 225

    Hi,

    Thanks for your help David.

    So i need to upload these different file format fonts to our server in the child theme fonts folder – and then replace the green text in the code you sent e.g. “webfont.eot” with that fonts source URL – is that it ?

    Sorry if Im slow on the uptake…

    Thanks

    Chris

    August 20, 2015 at 1:29 pm #205783
    David Martin – Support
    Moderator
    Post count: 20834

    Hi Chris,

    No problem, I will guide you through it step by step.

    1) Yes, first upload the fonts to your location.
    2) Amend the webfont. to your supplied filename, example in your first post 2E6300_1_0.woff
    3) Make sure the file paths are correct, so src: url('webfont.eot'); would be src: url('https://www.reikokaneko.co.uk/wp-content/themes/neighborhood-child/fonts/webfont.eot'); and webfont.eot would be replaced with your filename.

    – PS, you have an error in your first post:

    This src: url(https://www.www.reikokaneko.co.uk contains two www.www. do not copy that over it to the rest or it will error.

    Thanks,
    David

    August 20, 2015 at 2:28 pm #205830
    MarieWorks
    Member
    Post count: 225

    Ok I have uploaded Larsseit Light (our chosen typeface from http://www.myfonts.com/fonts/typedynamic/larsseit/)
    and below is what I am platting to place in our themes custom css area:

    @font-face {
  font-family: 'Larsseit';
  src: url('https://www.reikokaneko.co.uk/wp-content/themes/neighborhood-child/fonts/2EF97F_0_0.eot'); /* IE9 Compat Modes */
  src: url('https://www.reikokaneko.co.uk/wp-content/themes/neighborhood-child/fonts/2EF97F_0_0.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.reikokaneko.co.uk/wp-content/themes/neighborhood-child/fonts/2EF97F_0_0.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.reikokaneko.co.uk/wp-content/themes/neighborhood-child/fonts/2EF97F_0_0.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://www.reikokaneko.co.uk/wp-content/themes/neighborhood-child/fonts/2EF97F_0_0.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://www.reikokaneko.co.uk/wp-content/themes/neighborhood-child/fonts/2EF97F_0_0.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* Fallback */
body {
  font-family: 'Larsseit', Fallback, Helvetica, sans-serif;
}

    Does that look correct to you?

    What about these other instructions from the original css Mohammad provided us – where do we put those?

    font-weight: normal ;
}
:not(i) {
    font-family: 'Larsseit' !important;
}
ul.products li.product .price, .woocommerce ul.products li.product .price {
    
    font-size: 14px !important;
}

    Thanks

    Chris

    August 21, 2015 at 12:24 am #205996
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi Chris,

    With the 1st set of CSS, you shouldn’t need the 2nd set. Is everything working now?

    – Ed

    August 21, 2015 at 8:25 am #206052
    MarieWorks
    Member
    Post count: 225

    Hi Ed,

    I haven’t dropped the css in yet (just wanted to double check it first)…

    what about this section specifically…

    :not(i) {
    font-family: 'Larsseit' !important;

    When we were originally developing the site we did not use the above lines to start with and found that allot of theme icons broke – the above then fixed it…

    Thanks

    Chris

    August 21, 2015 at 5:27 pm #206333
    David Martin – Support
    Moderator
    Post count: 20834

    Hi Chris,

    That is essentially saying, preserve the icon fonts to the default font family and the everything else will become Larsseit.

    Don’t forget the missing closing bracket:

    :not(i) {
    font-family: 'Larsseit' !important;
}

    Thanks,
    David.

    August 21, 2015 at 5:29 pm #206335
    MarieWorks
    Member
    Post count: 225

    Hi David,

    Many Thanks – we’ll implementing this ..

    Chris

    August 21, 2015 at 5:30 pm #206337
    David Martin – Support
    Moderator
    Post count: 20834

    No problem, let us know if you need any other assistance.

    – David.

  • Back to forum
    Posted in: Neighborhood
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register