Adobe Fonts not working on mobile devices

Elements Typography
1

I added a custom Adobe Font to Tumult Hype. It displays fine on Desktop browsers but on mobile it’s replaced by a serif font.

You can see it here:
https://foguetes.github.io/

I added the font using this code to the custom font field:
image

And this code to the Head section:

<link rel="stylesheet" href="https://use.typekit.net/kwz2yft.css">
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Here’s the project file:
test.hype.zip (19.4 KB)

Why is it not working properly?

2

The Embedded Head HTML is just quite a bit wrong, to start. First, in the file you sent, the <style> tag isn’t closed properly (though the screenshot looks better). But beyond that the code isn’t tied to any font-face element, though it isn’t needed either.

For TypeKit, you can just include the <link ...> tag in the Hype font.

However for your CSS Font-Family, you need that to be a font which is actually referenced. schoolbook-italic is not, but schoolbook is. You may need to generate a different .css or name it differently to work with italic. Alternatively you may be able to get away with using the italic in Hype since that just sets the CSS font-style.

Here’s what it should look like:

02%20PM
Screen Shot 2020-02-02 at 8.17.02 PM.png1150×1092 207 KB

You can remove the <link> from the primary Head HTML and just use it from the font.

3

I do have Schoolbook Italic in this Typekit project,

In Adobe’s website I get this code to reference it:

font-family: schoolbook, serif;
font-weight: 400;
font-style: italic;

However, I’m not sure how to add it to Hype.

Here’s my latest attempt:
type_test.zip (18.5 KB)

4

Have you searched the forum? I found this on a first search for “Typekit”.

1 Like
5

I have read it.
It seems the only way to activate different type styles is by toggling these buttons:
image
Nothing else seems to work.
Nevertheless, I’m not very satisfied with this solution because I can’t be sure if I’m really using the right font or just a faux style.

6

Agreed - there’s a lot we’d like to improve about the typography panel.

My recommendation for now would be to create a CSS class in the head html that has the attributes you want and designates them as !important. For example:

<style>

.schoolbookOverride {
	font-family: schoolbook, serif !important;
	font-weight: 400  !important;
	font-style: italic  !important;
}

</style>

Then with a text element selected, set the class name in the identity inspector to schoolbookOverride. You’ll probably not want to have any inner html div/span styling on the text otherwise I don’t think it will count for that.

7

One quick fix for google fonts that come to mind: a toggle/checkbox on google fonts to add the font to the head or not. Much like JS files. Because adding multiple fonts weights adds multiple loads from Google. They are mostly not needed and the font weights don’t require loading the font multiple times.

8

Good ideas - in fact we might be able to do some of that automatically.

9

That would be good… but also allow us to disable inclusion altogether, too. As there are other optimization like seen here… that might be a nice option to choose from.

10

I added that note to our item in the feature tracker for improving this :slight_smile:.

1 Like