•Try•
Catch

Font Fallback

What to do when Opera Mini says No to Fonts

Opera Mini doesn't like to load fonts. It actually doesn't support CSS @fontface at all. This website likes fonts, but is working on gracefully degrading the .no-fontface experience one step at a time.

The main header of this site now uses an image fallback for Opera Mini. The same fallback is also used for Windows because it just doesn't want to do math right.


Without Fallback (yikes)



SASS Code

.no-fontface {
	.megahead {
		@include image-set('../img/megahead_curved_type_windows.png', '../img/megahead_curved_type_windows_@2X.png?nc=' + $nc);
		@include breakpoint(480px) {
			@include image-set('../img/megahead_curved_type_mobile_windows.png', '../img/megahead_curved_type_mobile_windows_@2X.png?nc=' + $nc);
		}
		div {
			display:none;
		}
		h1 {
			font-weight:inherit;
			font-size:1em;
			line-height: inherit;
			@extend .ir;
			height:192px;
		}
	}
}

Comments (0)


Add a Comment





Allowed tags: <b><i><br>Comment:


** No Opera, why load fonts over LTE? **

modmore