Web font issue on mobile

The CMS Questions
1

Hi there,

I just migrated my new website online.
Quite strange but I see that webfonts are blocked on mobile only (Chrome and Safari at least). Desktop browsers work well.

Ant idea where that could come from ?

Thanks

2

This is probably not a Kirby issue. But we can try to fix it anyway. What is the URL of your website?

1 Like
3

https://studiodailleurs.com

4

I think you’re missing quote marks in your css where you are linking to the font. So try url('../fonts/SourceSansPro-Regular.ttf') format("ttf").

5

Hi Flobin,

Thanks for the help. I added the quote marks and refreshed my css style sheet online.
Didn’t change anything on mobile :frowning:

6

Where did you get the CSS Code for this? I can recommend you the Webfont helper, in this case for google to get valid and working Webfonts:

https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin

1 Like
7

Ho Oli1,

I used the code already typed in the theme I bought.
Is this structure wrong ?

/* Montserrat */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.ttf') format("ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf') format("ttf");
  font-weight: 400;
  font-style: normal;
}

/* Source sans */
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Light.ttf') format("ttf");
  font-weight: 300;
  font-style: normal;
}
8

As you can see in the Webfont helper, a lot of fallbacks are needed. Only a TTF is not enough to get Cross Browser support. Check the example for ONE Font weight, TTF, EOT, WOFF, WOFF2, SVG are needed.

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('../fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
1 Like
9

Woff2, woff, and otf are enough.

You can use fontplop to make the files, and it will also give you css for them.

1 Like
10

Ok, thanks for the tip :slight_smile:
I’ll update that and keep you posted

11

Great, it’s all good now :slight_smile:
Thanks a lot !