Define global fallback font


#1

Is there an easy way to pick fallback font? I am having trouble getting google fonts to render in my embed.

The font is relatively close to Verdana, and I’d just like to globally set the fallback font in my project to Verdana so if the google font fails, it doesn’t look horrid.


#2

A font-family rule can define the fallback for a defined @font-face, so if you’re using the ‘Karma’ Google font, for example, and want to use Verdana if the font can’t load, you would need to assign a class to your element (like .karmafont) and add this CSS to the head:

.karmafont {
   font-family: 'Karma', Verdana, Helvetica, sans-serif;
}

Or if you want ALL Hype elements to get this font, use the class HYPE_element above.

You can assign a class to an element by selecting it and adding a class in the Identity Inspector. To see the ‘font-family’ being used by the Google, visiting the URL placed in the head of your document: https://fonts.googleapis.com/css?family=Karma&subset=latin


#3

Great, thanks. That will go a long way to helping.


#4

So it looks like this is not working because I set the font in the element inspector and those are INLINE.

How do I pull all fonts OFF of my elements, define inherit, and override it with your code above.

I don’t see a way in the font inspector to de-font my elements.


#5

I added !important to the head script, which is sorta hacky if you ask me.

It would be nice to be able to remove the fonts once you add them in the inspector, or choose to apply that font globally to the project and all elements, which is a common use case.

If that’s already an option and I missed it, disregard this. :smile:


#6

To remove the font, you’ll need to hit the - button in the resource library.
Thanks for the request about assigning the font across a project-- makes sense.

So because the font set in the Typography inspector is as you said an ‘inline’ style, it will override what you have set in the head. I should have mentioned the !important is a good way to enforce this. Alternatively, you could have a span or p tag within an element with a class set:

<p class="mystyle">my text</p>

and target that class in your CSS (this would work without !important).


#7

I don’t mean remove the font as an asset, I mean pull the inline style off the element so that your global override trick works. Even going to “InnerHTML” doesn’t show the inline font tag. I don’t currently see a way.

Going in and manually adding a class to all the elements is just as big a pain.

I know Hype is a WYSIWYG type authoring tool, but defining a global font style for a project is not only mega DRY, but a common task in any web project, that always seems to be a PITA anyway. Would prefer it to not be a bigger one. lol.