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.
Related
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;
}
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 thought i should open a new question for a matter related to my previous one (you can find it here). The situation is very similar to that question, but i found a different approach, and would like to know if it's correct.
I wanted to rewrite the urls for my site, and being able to take care of resource files (css, js, images, etc) so that browser doenn't search for them in the wrong directory.
Following are snippets of the html code of a sample page found browsing for example to articles/writer/erenor (here htaccess rewrites the url to /articles.php?writer=erenor, and this part works well).
Into <head> tag:
<script type="text/javascript" src="./inc-javascript-files/jquery.js"></script>
<style type="text/css">
#import url(./inc-css-files/index.css);
</style>
Into <body> tag:
<img alt="Avatar" src="./inc-images-files/avatar.png">
<img alt="Pattern" src="./inc-images-files/pattern/violet.png">
<br><br>
Writer Erenor
Now, i have this snippet from .htaccess file:
# take care of resource files
RewriteRule inc\-(css|javascript|images)\-files/(.*)\.(png|jp[e]g|gif|js|css) includes-$1/$2.$3 [L]
# url rewriting
RewriteRule ^articles/writer/(\w*)/?$ articles.php?writer=$1
And, finally, the example of the file structure:
/mysite
/mysite/.htaccess //this is the htaccess file we are talking about ;-)
/mysite/articles.php
/mysite/includes-css
/mysite/includes-css/index.css
/mysite/includes-javascript
/mysite/includes-javascript/jquery.js
/mysite/includes-images
/mysite/includes-images/avatar.png
/mysite/includes-images/pattern
/mysite/includes-images/pattern/violet.png
I just tested the code, and it seems to work: my browser asks for the css file (searching it in the "wrong" place) and it retrieves it correctly, so i'm quite happy with it :)
Links in the page will be like the one in the html shown above, which seems to work well.
Questions:
1. Is this a good approach to be able to avoid browsers requests to resources being in the "wrong" place? (I know that i will have to add more parameters when it comes to other files like for example videos, txt's, tga, etc etc etc)
2. Should i move this site to production server, will it work without modifications? In other words, is this a kind of "box" that can be moved here and there easily?
A little note: since these are just code snippets, tell me if something appears to be missing..maybe i just forgot to copy/paste it ;-)
You seem to be requesting the files in the current directory. Why do you do that? Why don't you request the from the site root? (remove the '.'). If I read it correctly, on /articles/writer/asdf and /articles/writer/zxcv the files will request /articles/writer/asdf/inc-css-files/index.css and /articles/writer/zxcv/inc-css-files/index.css. The browser sees this as two different files. If the user requests 100 writers, it will download index.css 100 times, and caches the same file 100 times under different names. That is wasteful.
I recommend requesting the files relative to the site root instead if you have the files stored in a folder in the site root.
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
Good day,
I have setup my http-vhosts.conf as follows:
Server name: aserv.domain.com
directory: /htdocs
Server 2 name: bserv.domain.com
directory: /htdocs/bserv
So essentially server 2 can be accessed like: aserv.domain.com/bserv.
when going to bserv.domain.com the display is plain html without css formatting and images. Yet when i go to aserv.domain.com/bserv, the site displays with correct formatting, css and images. Furthermore functions such as logging in do not work when accesssing from bserv.domain.com are working from aserv.domain.com/bserv.
Sorry for being long winded, the problem persists even if I change the directory of server 2 to outside htdocs. eg. /htdocs2.
My apologies for the vague question, I managed to solve this problem by changing the default directory in the config.php file.
I changed the relative path to the URL: bserv.domain.com
This would be useful to other implementing an open source web solution and that are missing formatting, css and images.