I'm working on a website that requires font trials online, the fonts I have are all .otf
Is there a way to embed the fonts and get them working on all browsers?
If not, what other alternatives do I have ?
cssfont-facefontshtml
I'm working on a website that requires font trials online, the fonts I have are all .otf
Is there a way to embed the fonts and get them working on all browsers?
If not, what other alternatives do I have ?
Best Answer
You can implement your
OTF
font using @font-face like:// Edit: OTF now works in most browsers, see comments
However if you want to support a wide variety of browsers i would recommend you to switch to
WOFF
andTTF
font types.WOFF
type is implemented by every major desktop browser, while theTTF
type is a fallback for older Safari, Android and iOS browsers. If your font is a free font, you could convert your font using for example a transfonter.If you want to support nearly every browser that is still out there (not necessary anymore IMHO), you should add some more font-types like:
You can read more about why all these types are implemented and their hacks here. To get a detailed view of which file-types are supported by which browsers, see:
@font-face Browser Support
EOT Browser Support
WOFF Browser Support
TTF Browser Support
SVG-Fonts Browser Support