I was messing around with #font-face and I had some weird results. I downloaded and installed the font and it got installed in /Users/myuser/Library/Fonts like it should (I suppose!?). The weird thing is that it was working whatever URL I gave it in CSS.
Now I have removed the #font-face class from the CSS altogether, emptied all possible caches, even disabled & removed the 'Garton' font from Font Book (Mac thingie), but it’s still working! (I’m developing and viewing the page in Eclipse.)
So...
1: how can it work? The only way to make it fail is when I edit the font-family 'Garton' in CSS. Whatever I write in #font-face it works and I have no duplicates in CSS! I restarted the computer, put it up in my PC where it fails. I looked in /Library/Fonts where default fonts are installed I suppose, and there is no 'Garton' there.
Works even without #font-face in css
#header{
font-family: 'Garton',Georgia, serif;
}
Only way to make it fail on mac
#header{
font-family: 'GartonXXX',Georgia, serif;
}
2: If ever get clarity in this, I guess I must install the font it on the webserver that’s hosting the page? Or is there another way?
3: Why do my downloaded fonts get installed in different folder than the default fonts? (Not so important, but I’m very confused.)
If you’ve removed Garton from your Mac, it is odd that your web page still renders in Garton even without #font-face code. I can only imagine that Garton is still installed on your Mac.
Questions regarding that are better asked at apple.stackexchange.com or superuser.com.
If you’re working with #font-face, it’s better not to install the font on your development machine, so that you see what normal users see.
Yes — to use Garton on a public web site (where people without Garton installed on their machines will view the site), you need to have the font file available on the site’s server, or via a font service like Typekit or FontSpring.
You don’t need to actually “install” the font on the web server, you just need to serve the font file from there, just like you were serving an image file or a stylesheet, so that the browser can get it and use it on your web page.
In order to get it to work across browsers, you need to have the font file in a few different formats, and be careful with your #font-face CSS to avoid tripping up Internet Explorer. The easiest way to get this right is to use Font Squirrel’s #font-face generator.
Again, this is a question for apple.stackexchange.com or superuser.com.
Related
How can I show a HTML+CSS file in a Flutter widget, while being able to manipulate the HTML or CSS (in file) and viewing the changes live?
Manipulating HTML:
I could use JavaScript to manipulate the HTML DOM of a loaded webpage, probably through localhost? Is there a better way to do it instead?
Manipulating CSS:
Searching around the internet I find JavaScript like "dom.getElementById('something').style.color = color.red". Though, how could I go for loading css on every change of the css file, if possible?
I hope my question is not vague. Please let me know of any issues or suggestions on this question.
The app is meant for desktop installs, though I wouldn't mind switching to working with flutter-web if need be.
Kind regards.
On my github website, I'm using a few images and fonts. The problem is that I don't want others to download these images or fonts (or link directly to their websites so that they can use them).
How do I prevent people from downloading them?
I've been searching for answers but I can't find an answer!
Edit: Just to add a bit more detail, in my CSS stylesheet, I'm linking my fonts like this.
#font-face tomato{
font-family: 'Tomato SC';
src: mywebsite.com/tomato-otf}
One problem is that people can just go to mywebsite.com/tomato-otf and download the font itself. I want to prevent this.
According to "How can I prevent web fonts from being downloaded and used illegally?", this isn't really possible.
Especially when you consider that GitHub pages, through Jekyll, does not suport .htaccess, so you can't even prevent hotlinking with a .htaccess file.
At least, make sure your font has a license, and is subsetted, so that they only include the characters your website needs to display.
I tried to import roboto from google fonts in css file:
#import url("http://fonts.googleapis.com/css?family=Roboto");
but when I run application I get this error:
gtk-css-provider-error-quark: css:1:0unknown # rule (1)
I searched for it in documentation and on google but I only found that's possible to use #import but only for other css files.
This is not supported; GTK CSS is slightly different from web CSS. To use a particular font in a desktop application, you need to install it on your system. Then you can simply specify it like this:
font-family: Roboto;
On Ubuntu, for example, you can make your app depend on the fonts-google package which includes Roboto.
(Imagine what would happen if importing web fonts was allowed; your app would stop functioning when the user didn't have an internet connection!)
I've been developing a pretty complicated HTML5 web app for the past month. Last night my iPhone suddenly decided to cache all JS, CSS, and images and not load any updated copies. This happened on my partner's iPhone too, so I'm going to assume it's affecting all users of our app.
Needless to say, clearing the browser cache, deleting the web app, restarting the phone, & restarting the wireless connection do nothing to fix the problem.
Removing <meta name="apple-mobile-web-app-capable" content="yes"> solves the problem, but creates a new problem since we need the app to run like...an app.
We're not going to go around appending the old trick ?number to the end of all our scripts, stylesheets, and images either. That's ridiculous. Also -- if we were to implement something like this, it would have to be some sort of dynamic JS implementation. Our app is one HTML page that loads most scripts, and additional pages are AJAXed in, additional data is also obtained via AJAX. I guess this could be done, but I'm hoping for a more elegant solution. Ya know, I feel like I shouldn't have to do anything since this all worked without a hitch for an entire month.
Using the cache-control, expires, and pragma <meta> tags doesn't do us any good either, as this is purely an iOS web app problem. Caching works normally in mobile Safari, mobile Chrome, and all desktop browsers. It appears that iOS has a separate cache for apps, including web apps, that the user can not clear.
It seems that many SO users have encountered this problem, but I can't find any satisfactory solutions. Has anyone out there in a similar situation solved this problem? Could I use a manifest file to specify not to cache several files? It seems like manifest files are used to do the opposite.
For what it's worth, and it's not a perfect solution, we had to settle with appending query strings. I've written a shell script to make this and a few other tasks bit more automated, you can look at the source on GitHub. A few details:
It's designed for JS but can easily be edited to handle CSS too.
It takes all files listed in script_order.txt and compiles them with Google's Closure Compiler
Groups them into chunks under 25kb when possible (iPhone won't cache anything over 25kb pre-gzip, although apparently this extends only to browsers and not standalone webapps)
Outputs a PHP file with <script> tags that have a ?v=timestamp appended to the script filenames. If you're working with static HTML and can't include a PHP file, you could rewrite the output to append the script tags to your index.html file.
Another pretty hacky solution would be to save your JS/CSS with a .php file extension, and in those files set the headers to something like this:
<?php
header("content-type: application/javascript");
header('Cache-Control: no-cache');
header('Pragma: no-cache');
?>
window.alert('hello world');
EDIT:
Setting the date to 2, 3 or 4 days in the future, start the app from homescreen and then set the date back to normal also can do the trick.
on my proxified site fonts from typekit.com are not imported.
I have this error message in console which seams to be related:
GET http://use.typekit.com/k/yvr5ozi-d.css?3bb2a6e53c9684ffdc9a98f41f5b2a623701…fad90e3287aa7c9eed409223e66627acbb9dbdff991d65ad30b7f969e63cd8681f2fa2879f 403 (Forbidden)
What should I do to make fonts embed correctly?
Nebojsa,
Your getting a 404 because the Typekit servers are rejecting your domain.
Meaning, every font belongs to a kit in TypeKit, in that kit you need to specify which domains these fonts are served under. If the particular site your working with is not listed here, it will not work and give you a 404.
http://help.typekit.com/customer/portal/articles/6857-using-typekit-while-developing-locally
In your case, if your site is catswithclounhats.com and if your serving the font under the virtualized site catswithclounhats.com.moovapp.com then the top level domain (moovapp.com) needs to be included in your kit.
good luck.
When I try going to that link, I get a forbidden error as well. You probably only have access to it because you might be logged in or have some kind of session going.
I recommend downloading the font file and then placing it in your assets directory in your project. You could even make a new sub-directory called assets/fonts.
Then you can use sass to include that font in your pages:
How to add some non-standard font to a website?