# Web font issue on mobile

**URL:** <https://forum.getkirby.com/t/web-font-issue-on-mobile/16571>\
**Category:** Questions\
**Tags:** v3\
**Created:** [December 5, 2019, 4:44pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571 "2019-12-05T16:44:10Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nico-liad](https://avatars.discourse-cdn.com/v4/letter/n/d9b06d/32.png) [@Nico-liad](https://forum.getkirby.com/u/Nico-liad)\
**Post date:** [December 5, 2019, 4:44pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/1 "2019-12-05T16:44:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![flobin](https://avatars.discourse-cdn.com/v4/letter/f/dec6dc/32.png) [@flobin](https://forum.getkirby.com/u/flobin)\
**Post date:** [December 5, 2019, 9:21pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/2 "2019-12-05T21:21:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Nico-liad](https://avatars.discourse-cdn.com/v4/letter/n/d9b06d/32.png) [@Nico-liad](https://forum.getkirby.com/u/Nico-liad)\
**Post date:** [December 5, 2019, 9:33pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/3 "2019-12-05T21:33:51Z")

</div>

[https://studiodailleurs.com](https://studiodailleurs.com)

---

<div class="post-metadata">

**Author:** ![flobin](https://avatars.discourse-cdn.com/v4/letter/f/dec6dc/32.png) [@flobin](https://forum.getkirby.com/u/flobin)\
**Post date:** [December 5, 2019, 9:46pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/4 "2019-12-05T21:46:58Z")

</div>

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")`.

---

<div class="post-metadata">

**Author:** ![Nico-liad](https://avatars.discourse-cdn.com/v4/letter/n/d9b06d/32.png) [@Nico-liad](https://forum.getkirby.com/u/Nico-liad)\
**Post date:** [December 5, 2019, 9:54pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/5 "2019-12-05T21:54:34Z")

</div>

Hi Flobin,

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

---

<div class="post-metadata">

**Author:** ![Oli1](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/oli1/32/14419_2.png) [@Oli1](https://forum.getkirby.com/u/Oli1)\
**Post date:** [December 5, 2019, 9:57pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/6 "2019-12-05T21:57:59Z")

</div>

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](https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin)

---

<div class="post-metadata">

**Author:** ![Nico-liad](https://avatars.discourse-cdn.com/v4/letter/n/d9b06d/32.png) [@Nico-liad](https://forum.getkirby.com/u/Nico-liad)\
**Post date:** [December 5, 2019, 10:02pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/7 "2019-12-05T22:02:04Z")

</div>

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;
}
```

---

<div class="post-metadata">

**Author:** ![Oli1](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/oli1/32/14419_2.png) [@Oli1](https://forum.getkirby.com/u/Oli1)\
**Post date:** [December 5, 2019, 10:05pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/8 "2019-12-05T22:05:30Z")

</div>

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.

```auto
/* 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 */
}

```

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [December 5, 2019, 10:08pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/9 "2019-12-05T22:08:13Z")

</div>

Woff2, woff, and otf are enough.

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

> **[Fast, Simple, & Free Open Source Webfont Converter | fontplop](https://www.fontplop.com/)**
>
> The simplest, fastest free webfont converter around.

---

<div class="post-metadata">

**Author:** ![Nico-liad](https://avatars.discourse-cdn.com/v4/letter/n/d9b06d/32.png) [@Nico-liad](https://forum.getkirby.com/u/Nico-liad)\
**Post date:** [December 5, 2019, 10:08pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/10 "2019-12-05T22:08:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Nico-liad](https://avatars.discourse-cdn.com/v4/letter/n/d9b06d/32.png) [@Nico-liad](https://forum.getkirby.com/u/Nico-liad)\
**Post date:** [December 5, 2019, 10:15pm UTC](https://forum.getkirby.com/t/web-font-issue-on-mobile/16571/11 "2019-12-05T22:15:02Z")

</div>

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