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.
Related
I am trying to display a envelope flaticon. I have tried everything and the envelope will not display. I have the following link set up that links to the css file :
http://patskailua.com/font-email/font/flaticon.css
The icon that I am trying display is
http://www.patskailua.com/font-email/001-interface.svg
The directions on the flaticon says to publish it using the following code:
<svg class="icon">
The website is at:
http://patskailua.com/div6.html#
I have tried everything and cannot get this icon to display. Any help would be greatly appreciated. Thanks, Beth
Please try this in HTML page:
<img src="http://www.patskailua.com/font-email/001-interface.svg">
Try this.
In http://patskailua.com/font-email/font/flaticon.css, remove font-email/font/ from the url of the font.
The style will look like shown below.
#font-face {
font-family: "Flaticon";
src: url("Flaticon.eot");
src: url("Flaticon.eot?#iefix") format("embedded-opentype"),
url("Flaticon.woff") format("woff"),
url("laticon.ttf") format("truetype"),
url("../svg/001-interface.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
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.
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 have some text in Photoshop & it's set to "crisp". When I put it on my site it doesn't quite look the same.
Does anything exist in CSS yet that I can use to make it crisp? Or not?
Or do you have any suggestions to achieve a similar effect?
Not only is it not possible, but different browsers on the market enforce different antialiasing settings, meaning that you can't get consistent results, even if they are not what you want.
For a good article on how the various browsers deal with font rendering, I'd suggest reading this: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
this is what I found on a big company's web site:
body, table, form {
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
background-color: transparent;
color: #333;
-webkit-font-smoothing: antialiased;}
What you're really asking is:
"Is it possible to control anti-aliasing from the web development perspective?"
The answer, for now, and for at least some time into the future (until OS/browser vendors start giving that kind of developmental control [don't hold your breath]) is undeniably: NO.
Forcing AA is a myth
No way to smooth text
Use images to simulate AA
Forcing anti-aliasing using css: Is this a myth?
Try This code snippet
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I have a simple line of text I'm replacing with sIFR for a header on my site. The site is liquid so it scales when the browser window changes width. But when I shrink the browser window down, the alt text (when I turn it on for testing) wraps to another line, but the sIFR text doesn't.
I've seen written elsewhere on the web that people implement in the sifr.js code a preventWrap=false function, but being new to JavaScript I'm not sure where to put it to make it work.
Here's the relevant CSS:
.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: 1px;
font-size: 18px;
text-align: center;
line-height: 1.5em;
}
And the relevant JavaScript:
sIFR.replaceElement(named({sSelector: "h2",
sFlashSrc: "flash/h2_font.swf", sBgColor: "#006633",
sColor: "#FFFFFF", sFlashVars: "textalign=center", sWmode: "transparent"}));
Not sure where I would put the preventWrap=false, or if that's even the way to go.
sIFR 3 should fix this.
I had a similar problem, adding position:relative to your CSS might fix it.