I am currently running a Magento Store through Cloudflare and I have been experiancing duplicate orders which some stack overflow users have suggested is due to Cloudflare. In order to test this, while still using my Cloudflare subscription to some extent, I decided to create CName Records (eg: cdn1.mydomain.com) for my Media, Skin and JS files and have cloudflare only serve these resources.
It seems to be going well except I am getting strange behavour with FireFox browsers.
My styles get linked to the page correctly with the following code:
<link rel="stylesheet" type="text/css" href="http://cdn1.mydomain.com.au/skin/frontend/theme/default/css/styles.css">
In my style sheet I link to my font packs with the following code (from IcoMoon):
/* BEGIN Install Custom Icons from IcoMoon */
#font-face {
font-family: 'icons';
src:url('../fonts/icons-v8.eot');
src:url('../fonts/icons-v8.eot?#iefix') format('embedded-opentype'),
url('../fonts/icons-v8.svg#icons') format('svg'),
url('../fonts/icons-v8.woff') format('woff'),
url('../fonts/icons-v8.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This all works perfectly fine with cloudflare enabled on my root domain and when it is disabled, however, when I turn it on for cdn1.mydomain.com.au, my icons in FireFox no longer load. They do however load in Chrome with no problems.
When looking at the net tab in fire bug, I can see that Fire Fox is indeed finding and downloading the font pack as it responds with a Success Header(200 OK).
Is there anything I am missing as to why FireFox would struggle with showing the font pack?
This might be an issue with something like Rocket Loader. Does turning off that feature in your performance settings - if on - fix the issue?
The fact that issue is in one browser and not the other suggests to me an optional performance feature possibly impacting something).
Related
I'm trying to develop a site for customer - and I encountered a weird thing - my fonts are, so to speak, blinking. To be more precise - not always - but mostly when I go t another subpage - before page display's custom fonts on headers, we can see default font for just split of a second. That creates unwanted effect.
I'm using Bulma, recompiled from scss of the newest version, and font called Museo Sans - which I serve from my server (not from Google). When I run GtMetric there is no latency in font reading and I also use a fade in script which helps a bit with the described effect, but still it's visible. Also the site is relatively small, so no latency due to number of requests or script's size.
My guess is that it may have something to do with the order of my css. I start with font-face declaration loading fonts, then I go to basic mixins and reset. I tried many things but no results. I have to add that it's not the first site I did with that particular setup - wordpress, bulma, scss.
The site's dev version is here:
https://protonads.mediamachina.net/
css here:
https://protonads.mediamachina.net/wp-content/themes/proton/proton.css
Thank you in advanced for any suggestions.
After a bit of reading the internet's sources I got the answer. So including fonts, from external source or local, with font-display: swap; will have two results - FOUT - because we're swapping fonts after it has been downloaded by the browser, second - a bit slower loading time, as we're letting he site to block rendering until he font is loaded.
So unfortunately no good option is available. Or at least no good option was I able to find.
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('inter-v2-latin-ext_latin-regular.woff2') format('woff2'),
url('inter-v2-latin-ext_latin-regular.woff') format('woff');
}
Sorry for the long post, but you need some background info before my question since this is a strange setup and it's quite complex.
I have two fonts that's needs to be in a newletter.
First font, Cyclone, is in a format OTF.
The second, Albert, is format EOT and WOFF.
We have a system that send the newsletters for us, i only need to upload a html file to that system, that contains the structure, images and newsletter content, and upload images that needs to be in the newsletter.
After that i can preview it by sending it to my self.
First, i can't upload fonts or anything else to the newsletter
system besides images and html.
Second, i have uploaded both fonts, and the css to our webiste's media
folder(public folder) where we also load images to the website.
Third, i or anyone else, have no access to the .htaccess file, and we
will never get it, since the site is hosted somewhere, and to get
that fixed for cross-domain for newsletters is to big of a task for
such a small job.
In the newsletter i am loading the font like this:
#import url(xxx.com/media/fonts/albert.css);
and the CSS looks like this:
#font-face {
font-family: Albert;
src: url("fsalbertwebregular.woff") format("woff");
}
have also tried this setup in the css:
#font-face {
font-family: 'Albert';
src: url('FSAlbertWeb-Regular.eot'); /* IE9 */
src: url('FSAlbertWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FSAlbertWeb-Regular.woff') format('woff'); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}
And then use the font on the body:
body{
font-family: 'Albert', times new roman;
}
But doing this, i am getting this error/warning:
CORS-headeren 'Access-Control-Allow-Origin'
The funny thing is, when i used the Cyclone.otf font, it worked fine.
When i use the albert.eot or albert.woff, it's not working.
I then tried to convert the woff to otf, and use that, didn't work - same error/warning.
The setup might sounds strange, and is sure is, i have tried to draw how the setup is, so hope it makes a bit more sense.
Can anyone help me with this, what needs to be done without editing the .htaccess file. And why does Cyclone.otf work and not the others, even after converting them to otf?
Special fonts wont work in emails. You have to still use the basic web fonts like arial.
If it worked for you on one machine it may mean that you have that font installed. Try testing it on another machine and see what results you get. Also it can be worth testing your email code through a system like email on acid to see how it reacts and breaks to different email systems such as gmail or outlook.
Here is a guide to email fonts: http://templates.mailchimp.com/design/typography/
Good Morning,
Today my Google chrome browser updated to 42 (42.0.2311.90), I have noticed alot of things going wrong with the site I'm working on, text will go through divs, padding being ignored.
The interesting thing is if you inspect the element and untick anything and tick it back again it starts working fine. No issues in any other browser or previous version of chrome (colleague still has 41). If you refresh the page a number of times the site appears correctly. If I delete the #font-face, the site works correctly.
It would appear that chrome seems to have either changed the way it draws/renders the external font or, it loads this last after drawing all the other elements.
Does anyone know any possible fixes or smooth way to use #font-face to make it (new version) chrome friendly?
#font-face {
font-family: 'MyFontFile';
src: url("../css/fonts/MyFontFile.eot") format("embedded-opentype"),
url("../css/fonts/MyFontFile.ttf") format("truetype"),
url("../css/fonts/MyFontFile.svg") format("svg"),
url("../css/fonts/MyFontFile.woff") format("woff");
font-style: normal;
font-weight: normal;
}
In order to fix this, I had to force the browser to redraw. Putting the following jquery in, this forces the browser to redraw.
$('body').hide().show(0);
This is a dumb problem to have, I'm assuming there's a simple fix. I'm using a web font in a Wordpress theme - the site I'm working on has two domains that can be used to access the same site.
In my CSS I have used the font-squirrel format to declare the fonts:
#font-face {
font-family: 'Oswald';
src: url('oswald-regular-webfont.eot');
src: url('oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('oswald-regular-webfont.woff') format('woff'),
url('oswald-regular-webfont.ttf') format('truetype'),
url('oswald-regular-webfont.svg#Oswald') format('svg');
font-weight: normal;
font-style: normal;
}
This works fine when I go to one of the domains, but when I go to the site via the other domain the font fails to load because it's considered to be a "cross-site" request. Basically when I go to domain1.com the request looks like this:
http://www.domain1.com/fonts/oswald-regular-webfont.ttf
But when I go to domain2.com the request STILL looks like that. Why? Since I'm using relative paths, shouldn't domain2.com be requesting:
http://www.domain2.com/fonts/oswald-regular-webfont.ttf
Anyone know what I've screwed up here? Is Wordpress injecting full paths into the CSS somehow?
Note: It works in Chrome, but not in Firefox or IE10. Chrome has the same strange URL behaviour, the difference is just that Chrome allows the cross-site request.
This is likely happening because you are using get_stylesheet_directory_uri() or similar to get the path to the CSS file and then using that in a wp_enqueue_style() call.
When this renders to the browser the page will have a full path to the file in it, not a relative one, which means that the font files are relative to another site, and thus it is cross site.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
We have a website - everything is working but web fonts flicker for a split second before the page loads.
Desired behaviour is that it doesn't flicker.
This doesn't seem to happen on other sites & I can't see any difference.
We are using fonts.com fonts.
All I can find on Google is an issue with Firefox - but this happens in all browsers for me.
Is there something obvious I have missed? How can I fix this?
You're probably seeing what is called FOUC (flash of unstyled content). It's a common issue. I suppose you can try the web font loader for more control of the font loading.
There's a couple ways to battle this.
1 - Since you're pulling the font from a website and you don't have the font hosted locally on your own server, there's a delay between your page loading and the font loading from fast.fonts.net.
If you download the font (.ttf) and run it through fontsquirrel's webfont generator, it should elevate some of the loading issue.
2 - Since it's only flickering for a few seconds on page load, you can hide your webpage's content a short duration while the font loads (200 milliseconds). This will ensure that when your page content loads that your user doesn't see the flickering.
Paul Irish has an article about this: http://www.paulirish.com/2009/fighting-the-font-face-fout/
It happened to me before and I went to through these two steps:
1- Use preloading:
In your headers you can add this
<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin ></link>
Make sure the href path and extensions are correct.
With preloading, your fonts will start downloading before other assets and it will improve the chance to not get flicker, but it might not be enough depending on if your webfont is too weight.
2- Use font-display:fallback
This property blocks displaying the text for a short time while loading and if passed this time doesn't load it swaps to the default font.
For example:
#font-face {
font-family: ExampleFont;
src: url(/path/to/fonts/examplefont.woff) format('woff'),
url(/path/to/fonts/examplefont.eot) format('eot');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
If doing all this, your font takes even longer to load and you don't want the flicker to occur, instead of fallback you might want to set font-display: block . You can check about this property here
It is not recommended because if download fails, you won't be able to display your site, but if flicker is a priority, then it can help.
Source: https://web.dev/optimize-webfont-loading/
A good library that solved my problem of loading the fonts synchronously was https://github.com/typekit/webfontloader
It is very simple to use:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>