How can I load the necessary fonts from typekit into the tinymce editor? The only example I could find was using @font-face which typekit doesn't use. I need to insert a JS snippet. I tried looking around in /umbraco_client/tinymce3 but I couldn't really find any code that was used there (with console.logs).
Why do you need to load it into the RTE editor? Should the editors be able to switch between some fonts for the rich text? Or for the headings?
I think you should just place the JS snippet from typekit in the <head></head> section of your Layout / Masterpage file and then reference the font using CSS.
I'm assuming that the font should be used site-wide - If so then you can add a rte specific stylesheet where you can add element and class styling, which can then reference the font-family.
Sorry if I'm way off but then please describe your scenario in a bit more detail :) - But in short what you're asking I don't think is the right approach nevertheless.
They would like to see the actual font being used in the editor instead of the default one RTE uses. I can't set the font in CSS since it isn't loaded via typekit in JS.
So unless you're doing something entirely different from what typekit usually advices you should be able to render the content from you rich text editor inside a div that you give a class and in your CSS you set the font-family to be your typekit font, which will then make the content of your div inherit the font so the editors don't need to make any decisions in that regard.
So in your rendering of the RTE field you wrap it something like this
<div class="content">
<!-- Your rendering here -->
</div>
And the set the content class to use the font-family.
Hmm, it's been a while since I played around with modifying that.
Must be honest and say I can't remember where the view for this is in the file system. But I don't think it's the one you mention since it sounds like some legacy stuff.
Then you should be able to add some CSS using the technique as well and targeting the div wrapping the RTE - You should be able to find the id or class of this div by using the dom inspector in your browser tools.
I'm not sure it will work but I think I would try going down that path if I were you :)
How to load Adobe TypeKit into Umbraco 7 tinyMCE?
How can I load the necessary fonts from typekit into the tinymce editor? The only example I could find was using @font-face which typekit doesn't use. I need to insert a JS snippet. I tried looking around in /umbraco_client/tinymce3 but I couldn't really find any code that was used there (with console.logs).
Hi Brad
Why do you need to load it into the RTE editor? Should the editors be able to switch between some fonts for the rich text? Or for the headings?
I think you should just place the JS snippet from typekit in the
<head></head>section of your Layout / Masterpage file and then reference the font using CSS.I'm assuming that the font should be used site-wide - If so then you can add a rte specific stylesheet where you can add element and class styling, which can then reference the font-family.
Sorry if I'm way off but then please describe your scenario in a bit more detail :) - But in short what you're asking I don't think is the right approach nevertheless.
Looking forward to hearing from you.
/Jan
Hi Jan,
They would like to see the actual font being used in the editor instead of the default one RTE uses. I can't set the font in CSS since it isn't loaded via typekit in JS.
Thank you,
Hi Brad
Usually when loading fonts from typekit you'll need to set the snippet, which could look like this for instance
Then you can call the fon-family in your CSS like
So unless you're doing something entirely different from what typekit usually advices you should be able to render the content from you rich text editor inside a div that you give a class and in your CSS you set the font-family to be your typekit font, which will then make the content of your div inherit the font so the editors don't need to make any decisions in that regard.
So in your rendering of the RTE field you wrap it something like this
And the set the content class to use the font-family.
Hope this makes sense.
/Jan
Do I put the script tags in /Umbraco/Masterpages/umbracoPage.Master?
I'm not talking about the actual rendered page, but in the admin when they're viewing the RTE. The font inside that.
Hi Brad
Aaaah! Ok now I get what you mean...
Hmm, it's been a while since I played around with modifying that.
Must be honest and say I can't remember where the view for this is in the file system. But I don't think it's the one you mention since it sounds like some legacy stuff.
But perhaps you can make use of this trick Matt wrote about last year in the 24 days in Umbraco calendar - http://24days.in/umbraco/2015/umbraco-7-back-office-tweaks/
Then you should be able to add some CSS using the technique as well and targeting the div wrapping the RTE - You should be able to find the id or class of this div by using the dom inspector in your browser tools.
I'm not sure it will work but I think I would try going down that path if I were you :)
Does this make any sense?
/Jan
is working on a reply...