I have a website https://www.rosterelf.com/ and Google PageSpeed Insights keeps saying to me
Ensure text remains visible during webfont load
For this code <link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css">
Hence I have researched found out some ways to solve this and hence I updated to below code
<link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css?family=proxima-nova&display=swap">
By appending adding, ?family=proxima-nova&display=swap in above code.
But Google PageSpeed Insights still throwing my the same error.
I have tried few other ways like enabling the cache in .htaccess like ExpiresByType text/css "access 1 month" etc .. but this error still exists.
Can someone guide me what should I do here ?
Many Thanks.
I've just solved that problem, to add the font-display: swap; property and remove the lighthouse warning, the file/link exported by Adobe must include that property on its settings, check this link for reference
I can't find any documentation about something like "?family=proxima-nova&display=swap" working for typekit. If you open up https://use.typekit.net/dgp2bhj.css?family=proxima-nova&display=swap, you'll see the font display is set to auto.
However, you can edit your typekit configuration to set your display to swap, see this article:
https://helpx.adobe.com/fonts/user-guide.html/fonts/using/font-display-settings.ug.html
If you do not have controll over the typekit, you can set the display to swap in your local css file:
#font-face {
font-family: 'proxima-nova';
src: local('proxima-nova'), url(https://use.typekit.net/dgp2bhj.css);
font-display: swap;
}
Related
I am using helmet: app.use(helmet()) and also tried adding app.disable('x-powered-by') for good measure to remove X-Powered-By headers.
The header is in fact removed on the html page that is generated but for files served from public using app.set('views', __dirname + '/views');it seems like the header is still showing up there. Is this normal behaviour? Is there a way to get rid of the header on those public files also?
For anyone running into the same issue. I found out that this was just due to the caching of css files on the browser... Simply opening and closing the browser seemed to have the X-POWERED-BY header being stripped out now.
I'm going to migrate the site http://www.thetrekkr.com (from a friend) to another server. The current server does have problems, until I migrate the domain I made a subdomain which is http://www.thetrekkr.pd-design.at. Everything works except the themes (Avada) icons - this must be font-awesome-icons. The icons are working in Edge but not in FF, Chrome, Opera.
I tried the following ways to fix the problems:
Change the links in the database to the new subdomain (plugin better search replace)
adding a .htaccess file to load the icons (https://theme-fusion.com/knowledgebase/are-your-font-awesome-icons-or-custom-fonts-not-showing-up/)
adding the following code in the functions.php to load stylesheets or scripts (WordPress site migration - icons missing)
changing many times from www without www etc.
deleting browser cache, trying on more devices
Unfortunately nothing helps.
Update
I notice I am getting these errors in my network tab. Are they a problem?
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.thetrekkr.com/wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.thetrekkr.com/wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
I had the same problem but the solution I found was simple in the end.
Go to theme options -> advanced -> dynamic css/js and then disable file caching, that worked for me. You can also reset the cache on this page.
Thanks
Jamie
I had a similar problem, This is How I fixed missing awesome fonts after migration
I migrated my client's website from MAMP to hostgator using all in one migration but after the migration, all of the avada awesome font wouldn't show (front end and back end) after hours of trying to fix I finally found a solution.
Within the wordpress theme dashboard navigated to > Theme options > Advanced > Theme features > FontAwesome then re-selected every font awesome option then hit save.
I could now select all the font again :)
It looks like you have a hardwired domain in your temporary site. The errors are an attempt to load assets from one site into another, and unless the remote site permits that explicitly, the browser will disallow it for security reasons. As the error indicates, if you wanted this configuration long-term, you can get the remote to allow it using the Access-Control-Allow-Origin header.
However, since this configuration is an accident of using two domains, it would be better to modify your site code to get these fonts to load from a relative path starting from /, rather than referencing the domain explicitly.
Go to Avada > Options > Advanced > Theme Features and check if the Font Awesome v4 Compatibility option is turned On. If not, turn it on and click Save Changes. And If it's already on then turn it off and turn it on again then click save changes.
I created a prestashop store in my development server.
After completion, to copy it to the final server and after changing the settings of the database and the domain, the site does not open in ie, ff, chrome and safari (but, if I view the source code in the browsers, he is corrects), only opens the opera. appear in other browsers the following errors:
in chrome:
This page contains the following errors:
error on line 67 at column 95: EntityRef: expecting ';'
Below is a rendering of the page up to the first error.
in firefox:
Error in analise the XML: bad formater
Location: http://douradoedourado.pt/
Line number 78, colune 191:$('#logofont').change(function(){var gFontVal=$("option:selected",this).val();var gFontName=gFontVal.split(':');$.cookie("logo_font",gFontVal);if($('head').find('link#logofont_link').length<1){$('head').append('<link id="logofont_link" rel="stylesheet" type="text/css" href="" />');}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^
someone help?
Normally when we move PS site to another server, we got some problems with it. To fix them please do the followings:
Note: These points may or may not fix the issues you have.
1) Disable cache and enable force compile.
2) Delete all compiled files from the cache/smarty/compile and also the cache/smarty/cache folder contents if there are any except index.php
3) Check the settings for the site url and ssl urls.
4) Regenerate .htaccess file
After these, check the site.
If the site does not open, then enable errors like below
open file in config/defines.inc.php and set _PS_MODE_DEV to true to enable errors.
After that reload the page. You will see errors. If you still dont understand those errors, then update your post along with the errors contents, and then i may be able to help you.
Thank you
I've been trying to set up a static website on Amazon S3. I've got things set up to use my personal domain, and so far I've been able to access the content just fine. All the links work, both for pages in the "root" directory and pages in subfolders, so it seems that S3 can follow the paths I'm using.
The problem is that none of the CSS stylings is being applied to the pages (it works fine on the development server on my local machine). I've tried using relative and absolute paths, but this doesn't seem to be the problem. I can see the content just as it should be, and I can navigate the site normally, but there's just no styling.
I've tried messing with permissions on the folders, but I'm clearly not getting something right. Am I missing something obvious? Surely S3 can use individual stylesheets?
Thanks in advance for any thoughts.
The reason is, amazon S3 sets the content-type of css files to binary/octet-stream, follow this tutorial to solve this issue.
You need to select your css file and then from the Properties tab click on Metadata. This is to assign optional metadata to the object as a name-value pair. The Content-Type key must have the Value text/css
Suppose I had a file fonts.css.scss with the following:
#font-face {
font-family: 'Play';
font-style: normal;
font-weight: bold;
src: local('Play-Bold'), url('http://themes.googleusercontent.com/static/fonts/play/v3/aBiGxW3iLixHo08CkkYT9gLUuEpTyoUstqEm5AMlJo4.woff') format('woff');
}
If my application were to be requested via SSL, the font file above would still be requested insecurely, which many browsers don't like and will complain about.
I tried renaming the file to font.css.erb, and then trying to use request.ssl? to determine whether to use http or https, but apparently request is undefined in assets.
So, what can I change to have the font loaded over SSL if necessary?
The problem is that css files in the assets directory are compiled into static assets, but you need that snippet of css to be dynamic. If that's the only url you're worried about, you could just put it into your view. If there's lots of url's referenced in your css you could make two different css files, one https friendly and one not. Then dynamically decide which file to load from your view.