# HTML iFrame font not showing on mobile

**URL:** <https://forum.wixstudio.com/t/html-iframe-font-not-showing-on-mobile/28327>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [April 6, 2020, 2:36pm UTC](https://forum.wixstudio.com/t/html-iframe-font-not-showing-on-mobile/28327 "2020-04-06T14:36:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![annakate](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/annakate/32/3202_2.png) [@annakate](https://forum.wixstudio.com/u/annakate)\
**Post date:** [April 6, 2020, 2:36pm UTC](https://forum.wixstudio.com/t/html-iframe-font-not-showing-on-mobile/28327/1 "2020-04-06T14:36:32Z")

</div>

I have used the following snippet from another tutorial to add a typewriter affect to my site, and it looks great. However, the font isn’t loading on mobile. Can someone take a look at my code and see why this might be happening?

Thank you!

```javascript
<html>

```

```javascript
<head>

```

```javascript
<style>

```

```javascript
/* Global */

```

```javascript
html{

```

```javascript
  min-height: 100%;

```

```javascript
  overflow: hidden;

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
body{

```

```javascript

```

```javascript
  height: calc(100vh - 8em);

```

```javascript

```

```javascript
  color: #000000;

```

```javascript

```

```javascript
  font-family: poppins-extralight,poppins,sans-serif;

```

```javascript

```

```javascript

```

```javascript
 letter-spacing: .15em;

```

```javascript

```

```javascript
  font-size:21px;

```

```javascript

```

```javascript
  background-color: #F2F1F2;

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
.line-1{

```

```javascript

```

```javascript
    position: relative;

```

```javascript

```

```javascript
    top: 50%;

```

```javascript

```

```javascript
    width: 24em;

```

```javascript

```

```javascript
    margin: 0 auto;

```

```javascript

```

```javascript
    border-right: 1px solid rgba(255,255,255,.75);

```

```javascript

```

```javascript
    font-size: 180%;

```

```javascript

```

```javascript
    text-align: center;

```

```javascript

```

```javascript
    white-space: nowrap;

```

```javascript

```

```javascript
    overflow: hidden;

```

```javascript

```

```javascript
    transform: translateY(-50%);

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript

```

```javascript
/* Animation */

```

```javascript

```

```javascript
.anim-typewriter{

```

```javascript

```

```javascript
  animation: typewriter 2s steps(44) 1s 1 normal both,

```

```javascript

```

```javascript
             blinkTextCursor 500ms steps(44) 0 infinite normal;

```

```javascript

```

```javascript
  -webkit-animation: typewriter 2s steps(44) 1s 1 normal both,

```

```javascript

```

```javascript
                     blinkTextCursor 500ms steps(44) 0 infinite normal;

```

```javascript

```

```javascript
  -moz-animation: typewriter 2s steps(44) 1s 1 normal both,

```

```javascript

```

```javascript
                  blinkTextCursor 500ms steps(44) 0 infinite normal;

```

```javascript

```

```javascript
  -o-animation: typewriter 2s steps(44) 1s 1 normal both,

```

```javascript

```

```javascript
                blinkTextCursor 500ms steps(44) 0 infinite normal;

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
@keyframes typewriter{

```

```javascript

```

```javascript
  from{

```

```javascript

```

```javascript
    width: 0;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
  to{

```

```javascript

```

```javascript
    width: 24em;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
@-webkit-keyframes typewriter{

```

```javascript

```

```javascript
  from{

```

```javascript

```

```javascript
    width: 0;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
  to{

```

```javascript

```

```javascript
    width: 24em;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
@-moz-keyframes typewriter{

```

```javascript

```

```javascript
  from{

```

```javascript

```

```javascript
    width: 0;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
  to{

```

```javascript

```

```javascript
    width: 24em;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
@-o-keyframes typewriter{

```

```javascript

```

```javascript
  from{

```

```javascript

```

```javascript
    width: 0;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
  to{

```

```javascript

```

```javascript
    width: 24em;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript

```

```javascript
@keyframes blinkTextCursor{

```

```javascript

```

```javascript
  from{

```

```javascript

```

```javascript
    border-right-color: rgba(255,255,255,.75);

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
  to{

```

```javascript

```

```javascript
    border-right-color: transparent;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
@-webkit-keyframes blinkTextCursor{

```

```javascript

```

```javascript
  from{

```

```javascript

```

```javascript
    border-right-color: rgba(0,0,0,.75);

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
  to{

```

```javascript

```

```javascript
    border-right-color: transparent;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
@-moz-keyframes blinkTextCursor{

```

```javascript

```

```javascript
  from{

```

```javascript

```

```javascript
    border-right-color: rgba(255,255,255,.75);

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
  to{

```

```javascript

```

```javascript
    border-right-color: transparent;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
@-o-keyframes blinkTextCursor{

```

```javascript

```

```javascript
  from{

```

```javascript

```

```javascript
    border-right-color: rgba(255,255,255,.75);

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
  to{

```

```javascript

```

```javascript
    border-right-color: transparent;

```

```javascript

```

```javascript
  }

```

```javascript

```

```javascript
}

```

```javascript

```

```javascript
</style>

```

```javascript

```

```javascript

```

```javascript

```

```javascript

```

```javascript
</head>

```

```javascript

```

```javascript

```

```javascript
<body>

```

```javascript

```

```javascript

```

```javascript
<section class="cd-intro">

```

```javascript

```

```javascript
<div id="app"></div>

```

```javascript

```

```javascript
	</section>

```

```javascript

```

```javascript
  <script src='https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.js'></script>

```

```javascript

```

```javascript

```

```javascript

```

```javascript

```

```javascript

```

```javascript
    <script>

```

```javascript

```

```javascript
    var app = document.getElementById('app');

```

```javascript

```

```javascript

```

```javascript
var typewriter = new Typewriter(app, {

```

```javascript

```

```javascript
    loop: true

```

```javascript

```

```javascript
});

```

```javascript

```

```javascript

```

```javascript
typewriter.typeString('accelerating B2B commerce.')

```

```javascript

```

```javascript
    .pauseFor(2500)

```

```javascript

```

```javascript
    .deleteAll()

```

```javascript

```

```javascript
    .typeString('creating frictionless experiences.')

```

```javascript

```

```javascript
    .pauseFor(2500)

```

```javascript

```

```javascript
    .deleteAll()

```

```javascript

```

```javascript
    .typeString('automating for the new normal.')

```

```javascript

```

```javascript
.pauseFor(2500)

```

```javascript

```

```javascript
    .start();

```

```javascript

```

```javascript
  </script>

```

```javascript

```

```javascript

```

```javascript
</body>

```

```javascript

```

```javascript

```

```javascript
</html>

```

```javascript

```

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [April 6, 2020, 3:16pm UTC](https://forum.wixstudio.com/t/html-iframe-font-not-showing-on-mobile/28327/2 "2020-04-06T15:16:42Z")

</div>

First off, is the actual iframe showing on the mobile editor/preview/site or is it just the text that is not showing?

If it is the first, then simply make sure that the iframe is not set as hidden on mobile in your Wix Mobile Editor settings.  
[https://support.wix.com/en/article/finding-hidden-elements-in-the-mobile-editor-4535238](https://support.wix.com/en/article/finding-hidden-elements-in-the-mobile-editor-4535238)

Also please note that Wix wraps iframes on mobiles differently to than on desktop sites, so it might be causing an issue there.

Plus, as you are using third party code, then Wix won’ provide you with support as they have not tested the code themselves.  
[https://support.wix.com/en/article/using-iframes-to-display-visible-content-on-your-site](https://support.wix.com/en/article/using-iframes-to-display-visible-content-on-your-site)  
Wix cannot provide support for external codes that were not created or tested with Wix. If you are experiencing an issue with your code snippet, please contact the provider directly.

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [April 6, 2020, 3:22pm UTC](https://forum.wixstudio.com/t/html-iframe-font-not-showing-on-mobile/28327/3 "2020-04-06T15:22:23Z")

</div>

Also, instead of using html, why not jut use the example from Yisrael (Wix Admin) and see if that works better for you.  
[https://www.grampsworkbench.com/Examples/Typewriter](https://www.grampsworkbench.com/Examples/Typewriter)

Or you can do the html route if you want in this previous post.  
[https://www.wix.com/corvid/forum/community-discussion/typewriter-like-animation-on-text-possible](https://www.wix.com/corvid/forum/community-discussion/typewriter-like-animation-on-text-possible)
