I am working on a web project that is used by security minded people. Some of them have turned off webfonts and due to this the icons such as undo, redo, bulleted list ext.ext. are not showing up.
That being said, the first thing i did was attempted to load the fonts required in my main css file before the TinyMCE code was loaded.
#font-face
{
font-family: 'tinymce';
src: url('fonts/tinymce.eot');
src: url('fonts/tinymce.eot?#iefix') format('embedded-opentype'),
url('fonts/tinymce.woff') format('woff'),
url('fonts/tinymce.ttf') format('truetype'),
url('fonts/tinymce.svg') format('svg');
}
However this has still not resolved my issues. Is there any guidance anyone can give me as to a way to get these icons to show?
Since webfonts are blocked I ended up having to change to a different editor ckeditor. here is there site http://ckeditor.com/demo.
Related
Getting red flagged for:
Ensure text remains visible during webfont load Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading
I have font-display: auto in my font declarations:
#font-face {
font-family: 'lagosregular';
src: url('../fonts/lagos-webfont.woff2') format('woff2'),
url('../fonts/lagos-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: auto;
}
https://africankitchen.gallery
I'm testing your site on PSI but not getting the Ensure text remains visible during webfont load. Did it resolve itself? If you took some extra steps or different path to make it happen, consider answering your own question for others who find this.
You're right, sorry, about two days later, it disappeared and I forgot to resolve this post.
It was odd and persistent for days, then it vanished without me doing anything else.
Thank you.
My brand uses a particular typeface, which I have bought and self host. I want to use the font on my email newsletter (with fall back fonts). Using #font-face I have linked to the self hosted fonts on my server. I've put the html newsletter file on my server and can see that the correct font is displayed. I've also sent myself a test email and again the correct font is displayed.
However, I'm writing the HTML file on my Mac and when I come to view the file (on my computer) in Firefox or Chrome the fall back font is displayed not the #font-face linked font. Why is this and what can I do about it? The link to fonts is absolute, so I presume it should work when testing locally. It is going to make development difficult if I can't test on my computer locally. Update: strangely when I open the html file on my computer in Safari the linked to fonts are displayed.
Update: is this something to do with .htaccess file? See http://ijotted.blogspot.co.uk/2012/05/self-hosting-web-fonts-for-use-on-your.html "IE and Firefox require that fonts be served from the same domain as the website" Browsers are not able to access the files because the files are stored on my server (not on my computer)?
Code here:
#media screen {
#font-face {
font-family: 'ElenaWebBasic';
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot');
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot?#iefix') format('embedded-opentype'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff2') format('woff2'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
}
First and foremost, it's difficult to test custom fonts if you have them installed on your system. When a browser or email client sees a font in the font stack, it can display the locally installed version if the remotely referenced one fails. So even though it's broken, it will seem like it works. For email, using a remote service like Litmus or Email on Acid is a good way to test emails and web font display.
Depending on what where you purchased the font, they might have a way to reference it on a CDN. Referencing a service (like Google fonts) is currently the easiest way to display web fonts in html email.
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://place-you-bought-the-font.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
I'd recommend looking in the font seller's site to see if they have an option like this.
Here are a few more options to try:
<style type="text/css">
#media screen {
#font-face{
font-family:'Open Sans';
font-style:normal;
font-weight:400;
src:local('Open Sans'), local('OpenSans'), url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
}
</style>
Email has trouble with #import, so you might try using <link> instead:
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
I work in a government network where the security settings are managed by IT. We are also restricted to using IE9 on all our machines. I develop web applications used in lesson content (we are a school) for students, so I try to make the pages look as modern as possible so as not to bore the heck out of the students. Our machines don't even have Helvetica and we teach graphic design.
Until recently, I've abbandoned hope with trying to get #font-face working on pages I make for my school. That is ... until I discovered Prezi. If you go to http://prezi.com with IE9 and Internet site security settings set to "medium high," you'll se that the site still magically loads its "PT Sans" font on the page straight from the fonts.googleapis site. When I discovered this, I literally spent an entire 24-hour period trying to reverse engineer their method, couldn't replicate it with my off-site server, then spent the next 24 hours tracking down the front end developers of Prezi to see if they could let me in on their secret (hey, it's the government, we have free time), all to no avail of course.
The glimmer of hope from seeing Prezi figure it out has caused me to become doglike obsessed with this issue. I've tried all the tricks and fixes all around the Internet over the course of a year. I still can't get it to work.
Prezi uses:
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
to call the font from their index page, which returns this:
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/mqvGe0REcQNb_tfYSePALA.eot);
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/mqvGe0REcQNb_tfYSePALA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/jduSEW07_j4sIG_ERxiq4Q.woff) format('woff');
}
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/1FvfuwkSjtdD3II7O-pVp_esZW2xOQ-xsNqO47m55DA.eot);
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/1FvfuwkSjtdD3II7O-pVp_esZW2xOQ-xsNqO47m55DA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/HXiERDIZdwFzjXlbcMq7XPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
And then they just use it like a regular web font using font-family: 'PT Sans'; !!!
I can replicate the whole thing on a local html file because the security settings for intranet pages are lower than regular Internet pages. But I'm not authorized to use the intranet for my applications.
How did Prezi do it! What could they have done to get it to work on their site? Prezi front-end developers have not responded to my Facebook, Twitter, e-mail or voicemail messages. Prezi software is obviously proprietary, but this is a web page on their site, not their software product.
My IT guys are not helpful either, telling me things I already know, like "medium-high" security settings block #font-face, duh (but obviously they don't, because Prezi did it). They certainly have bigger fish to fry. As a pacifier, they pushed Chrome and FF to my cubicle. Most of what they deal with is "my screen is black" or "what's my desktop" type questions.
Because my question is so specific to my environment, architecture and situation, this is really a shot in the dark. I really did spent more than 24 hours reverse engineering Prezi's home page to figure this out to no avail. It was a waste of time.
How could they possibly get around my network's security settings when no other website, not even http://www.google.com/fonts displays fonts on our machines?
Note: I apologize for the chattyness. It's been 1 a.m. and it's been 37 hours.
I think the basic problem is that IE won't let you download from another domain. To get around it you can host the font on your own server. Here's the basic setup:
Download your ttf font file (in google fonts you can download by adding the font to your collection and then clicking on the down arrow at the top right of the collection 'Use' sceen)
Nip on over to Font Squirrel and use their 'webfont generator' to create the various permutations needed
copy the #font-face code from the top of the handy example page that font squirrel creates and put it into your css file. It will look something like this:
#font-face {
font-family: 'PTSans';
src: url('PTSans-regular-webfont.eot');
src: url('PTSans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('PTSans-regular-webfont.woff') format('woff'),
url('PTSans-regular-webfont.ttf') format('truetype'),
url('PTSans-regular-webfont.svg#PTSansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Upload the lot and you should be set to go.
Note: this will only work for the 'Medium-high' security setting (and lower). If you're stuck with 'High' you're stuck with the windows default fonts.
I'm using the free web fonts service via webfonts.fonts.com which are being served by their server and i'm getting the following warning in my Chrome/Safari browser console: "Resource interpreted as Font but transferred with MIME type application/octet-stream."
This is the JS link fonts.com specify to place in the header:
<script type="text/javascript" src="http://fast.fonts.com/jsapi/f3d92ff3-2575-4cb8-a4b8-9b4c5d0376fb.js"></script>
This is the CSS i'm using:
h1 { margin-bottom: 10px;font: 35px/35px 'Helvetica W01 Blk', Arial, Helvetica, sans-serif; font-weight: bold; color: #00AEEF; }
I don't know what the warning means and wondered since it's only a warning and not an error, whether it's that critical.
I've tested the site on various browsers, Mac and PC and on the face of it everything worked and looked as it should.
Can anyone shed any light as to whether i'm doing something wrong or even if this is an issue or not?
Gladly post any more information in necessary.
Thanks in advance.
This warning is perfectly safe to ignore. Our service uses the "application/octet-stream" as a generic MIME type for our font data because there do not seem to be any officially standardized/recognized MIME types for the various web font formats. There are indeed some suggestions by various entities for some of the formats, however, using this generic MIME type helps us maximize compatibility with our supported browsers.
If you do have any trouble with the service functioning correctly, please don't hesitate to contact us by sending a ticket from our support form:
http://webfonts.fonts.com/en-US/ContactUs/TechnicalSupport
i render customs fonts in a webview on the iPad. rendering works and the fonts get displayed as they should. but, the rendering is slow. so everything is on my pages loads up quickly, except for the font-face. any idea how i can speed up things?
thanks
There are a few options you have to optimise your font-face rules. By using a data: url you can use the font inline by encoding in base64. For example:
#font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[base-encoded font here]");
}
There are some other useful performance considerations and approaches outlined in this article from 2009.