CSS Code for Eras Light Itc

CSS Code for eras light itc

The answer lies in the way different browsers interpret fonts for example

Firefox allows the use of "Eras ITC",

Chrome wants you to pick one of the variations of Eras, as in "medium", "bold", etc. but won't let your just use "Eras ITC".

IE9 doesn't care and will render all fonts installed on your windows system (you can check just by typing "fonts" in your start menu and picking installed fonts.)

Opera seems to work similar to IE9 as far as using system fonts

here is the answer that works:

{font-family: "Eras ITC", "Eras Light ITC",  sans-serif ;}

This will work in all browsers, at least on windows systems... sans-serif is just kind of a fall back for any failure with the first two fonts.

Font works in IE, but but not Firefox or Chrome

When you are using white-spaces for font names you have to put them in quotes, like so:

font-family: "Eras ITC", "Eras Light ITC", Sans-Serif;

Browsers not honoring fonts in bootstrap

Are you using Google Fonts to render Open Sans or is it the font for your Bootswatch Theme? If you're rendering via Google Fonts, make sure that your link to it comes AFTER your bootstrap.css files.

Also: if you're working with a live site make sure that you're not getting stymied by the site's cache (which can cause delays in the changes to a .css file displaying).

Font family preview in TinyMCE

Unfortunately I can't back any of this up with documentation, but if we disect the codepen provided by @skobalijc, we can see that what TinyMCE itself is made up of some elements inserted directly into the DOM which make up the menus and UI, and an iframe for the content area.

What content_css: ['//fonts.googleapis.com/css?family=Indie+Flower'], does is to add a link into the content iframe, so nothing outside of that iframe has access to the font. The easiest fix is just to add a link to your font stylesheet

<link rel="stylesheet prefetch" href="//fonts.googleapis.com/css?family=Indie+Flower">

into the head of your main document as well as using the content_cssparameter in your TinyMCE initialisation, as you can see here: https://codepen.io/anon/pen/bMwwrG

---

Related Topics