I'm trying to self-host FontAwesome (using LESS), but I'd like to serve up the css and webfonts directories from our S3 cloud instead of from the site, for performance reasons. Is this possible? I haven't been successful yet since the css looks for the webfonts directory in a relative location.
Can I create a "Kit" like FontAwesome does with their own CDN? We prefer not to use the FontAwesome CDN for various customization and security reasons.
Related
I am trying to link to this font: https://fonts.google.com/specimen/Press+Start+2P?query=2 to update the styling on our authentication page using Auth0. The page asks for URL and stipulates:
This URL must point directly to a woff or woff2 font file.
Not sure how to do this.
There's no way you can directly call a google hosted font like that.
You can download it and host it in some cdn and serve from there or add it to your local.
I am trying to import Font Awesome and Google Fonts into my Ember app but they aren't working. None of the styles are being applied.
I am using ember-cli-sass. Am I not able to import a stylesheet from a CDN? Does it not compile .css files? I tried looking for a .scss file for Font Awesome on a CDN but I couldn't find any, and I don't think Google offers .scss files at all.
app.js
import 'fonts.scss'
fonts.scss
#import '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
#import '//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300';
When I add <i class="fa fa-user"></i> to my template, none of the Font Awesome styles are applied. Why aren't the stylesheets being imported?
There are two main ways to do this. If you don't mind fetching it from the internet, you can add them as links in your <head> tag in index.html.
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300" rel="stylesheet">
Or you can download the files and include them in your scss build. This gives you more freedom to customize them. You might want to do this to minimize the number of API calls your app requires in order to load, as you've heard that will make your app load faster. But consider that if the fonts you are loading are popular (and these two are) then your user may already have them cached, making them blazingly fast.
If you want to download the files into your build here is what you do. Keep in mind that CSS is valid SCSS, so if you can get a CSS file you can always just rename it .scss and include it in your build. But you can't import a file from the internet in your scss. Your scss gets parsed and compiled into CSS before your app even gets served. The files need to be available from your project folders.
Font Awesome
For FontAwesome 4.7 you can get the sass files and include it in your project pretty easily. Go to http://fontawesome.io/ , click the "Download" button, download the files. You need two folders, the "scss" folder and the "fonts" folder. Add those two folders to your project. Open the scss/_variables.scss file and change the #fa-font-path to be the path to the font directory. Include the font-awesome.scss file in your scss. You can also find the instructions at http://fontawesome.io/get-started/
If you want to start to get fancy you can then edit the files to only include the icons you want. There are several ways to do this, but I won't get into that here. It's licensed under the MIT license, so you should be able to do this legally.
Google Fonts
Open a browser and paste http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300 into the url. You will actually get the css file. Copy and paste into a .scss file and include it in your build. With Google Fonts each font has its own license. Open Sans is covered by the Apache 2.0 license, so you can do this.
There is no support in SASS for importing a CSS file
If you are using Ember, the best way would be to either download the CSS into the vendors folder and added to ember-cli-build.js.
Alternatively, if you want to use the CDN, you can add the CSS to the index.html in Ember.
I am using premium fonts on a website and linked them using
#font-face {src: url(../fonts/fontName.ttf);}
The fonts folder is currently accessible by anyone by going to www.website.tld/fonts.
How can I be able to hide fonts directory from public access but still be able to use the fonts in our website.
Thanks.
If you want to prevent font files showing up in your directory listing, use this in your .htaccess
IndexIgnore *.ttf *.woff *.woff2 *.eot, *.otf *.cff *.afm *.lwfn
IndexIgnore *.ffil *.fon *.pfm *.pfb *.svg *.std *.pro *.xsf
Obviously, you should only add the ones you use.
If you want to disable the directory listing of your entire /fonts folder use this instead (same file):
<Directory /path/to/fonts>
Options -Indexes
</Directory>
This, however, will only disable the listing of those files, not downloading. And disabling listing for resources that have publicly available download links (referenced in CSS in the case of font files) is absolutely pointless.
If you want to prevent clients (people, bots) from "illegally" downloading font files from your server... well, you can't.
You need to allow browsers (clients) to download the font file(s) so they render your website according to your designer's specs. Once used, a copy of any resource exists in the browser and you cannot stop savvy clients from accessing them, because you do not and cannot control their browser.
Your question has, probably, already been answered, in the agreement you signed with the author/vendor of the font. Using the font online is, most likely, clearly defined in that agreement.
If it's not, it is still the vendor/author that needs to provide you with the correct answer. Both technically and legally. And I believe the latter is what actually interests you.
By the way, this is the main reason the use for web is charged extra by most foundries: when they allow it, they allow a free download link (illegal if used for anything other than viewing the content it was provided for). All they can do about it is embed a notice telling the use of their font files without their knowledge and acceptance is illegal.
We're making use of Jawr to bundle javascript and css for a largescale Spring project. One of our requirements is to serve all assets (js, images, css etc) via a CDN (CloudFront).
So far, we've externalised the Jawr working directory to a central S3 bucket and have mapped CloudFront over to top to serve files from this bucket on a sub domain. We now need to tell Jawr to make use of the CDN rather than the Spring controller (and include the cache busting hash).
Has anyone had any experience with this type of configuration? There seems to be a total lack of documentation for Jawr in general and specifically around integrating Jawr with a CDN.
Thanks in advance.
Backgournd info:
I have a ISS6 webserver hosting multiple websites. I have about 15 domains that could be considered "sister" sites that share styles, layouts, etc but they still will have their own customization styles. (I haven't created anything but these basic sites just yet)
The question is thus: since a good portion of the CSS and JS for each site will be the same, what are some ways to share a common master CSS & JS directory between sites on the same IIS server?
I know I could host this master directory of common files on one of the domains and it from there but that doesn't seem like the most elegant option. Or I could give each domain its own personal copy of the CSS and JS files as well which probably the worst option.
I do not use any version control software or Visual Studio, just notepad++ so I'm not so concerned with sharing files among developers.
Thanks for any input.
For historical record, I'd recommend that you infact DO host your shared files on a single, separate domain. Especially if that is all that domain is used for.
The primary benefit is that the domain will be cookieless (reducing bulk in each HTTP call). It's one step down from the optimum solution which would be to host your shared files on a CDN. Amazon's S3/CloudFront solution is very affordable.