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.
Related
This is driving me nuts. This is should be simple - but I can't tell what I am doing wrong.
I have a plain old web site. Index.html, a css folder, images folder, fonts folder and js folder.
I am trying to add a font through the #font-face declaration.
I run the page locally and I get 404s for both the font file and the background image?
The paths are correct?
You are pointing to the wrong directory.
Try to add /../ before your path. Like:
src: url(/../fonts/in901xk.ttf)
This give an "step back" to the main directory and now can point to the "fonts" folder.
Other option to check this, for example in the case of images, is write the complete url that you think is the correct.If you can see the image, you will know what is the correct path that you should use in your src
i have a problem to host our branding font and access it online
please i need the steps to host this font on HostGator and how can get the url from our hosting service and access it in CSS3 using #import
how this process take place?
As I know you want to use your custom font.
Steps are given below:
You have convert your ttf file to web font (you can do it using https://transfonter.org )
After converting .ttf file to web font you need to upload those files to your server
that's it..
Now you can share or use that font file to your website.
Hope! this will help you.
Thanks
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 accessing a 3rd-party iFrame (dialog) in our web app. This is loaded by javascript and served via the 3rd-party's server. If we provide them with a link to a custom CSS file we can change the appearance of the dialog.
How, in the Rails pipeline, can we create this file and then provide the 3rd-party with a URL that will, hopefully, respect (read: use) our CDN?
Does the file belong in vendor/assets/stylesheets/? I'm pretty sure that becomes part of asset pipeline as well...
Thoughts?
I'm using Twitter Bootstrap 3.0 on a project. There's a fixed requirement of not hosting any files externally. But when I host the .css and .js files locally, the Glyphicons become corrupted.
Here's what it should look like:
Using bootstrap.min.css from the original CDN issues no errors, but placing the same file on the local server will affect the icons rendering, like in the image below:
It doesn't seem to matter if I download and save the original file using wget, DownThemAll, or open it on Firefox and use the "Save As" feature. It doesn't matter if the <link> href is href="/css/bootstrap.min.css, href="http://www.domain.com/css/bootstrap.min.css or href="http://www.domain.com/bootstrap.min.css.
My dev machine is running Linux. I can only use it to browse the site, both on my dev machine and in production. I'm using Firefox 26, but changing the value of security.fileuri.strict_origin_policy has no effect. As far as I can tell, the only difference that causes the render error is the CSS file location.
The issue happens both on my dev machine and in the live server.
Glyphicons are webfonts loaded from addresses hardcoded in the CDN version of Twitter Bootstrap. The original code is:
#font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')}
You have to either edit the CSS or place the font files on the /fonts/ folder. You can obtain both the fonts and the CSS files at the "customize" page.