I want to use a font collection from Google Fonts directory. I selected the styles and include the CSS link tag in my project's template.
Alternatively, with Google Fonts you can also download the collection, and what you get is a zip file with all the font's styles.
I can create a CSS equivalent of the one Google gives me to include in the HTML, so I want to provide the self hosted font files as fallback, if the visitor can't access the Google Font API.
How do I setup this, and preventing both the Google font file and the self hosted font file from being downloaded? If the user does has access to Google Fonts, it's browser shouldn't download the self hosted version of the font.
I would recommend just self hosting them. This is fontsprings' "bullet-proof" font-face syntax.
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Having all four of these set will ensure that it works across browsers. Just make sure to have your font in all four types. Font Squirrel has great kits for fontface as well.
You have 3 options:
Use 2 sets of #font-face at-rules, using different font-family names (e.g. "Droid Sans" and "Droid Sans Local"), and then using a font stack like "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif. However, this will cause both fonts to be downloaded, increasing load time.
Use a single set of #font-face at-rules, but use 2 sets of src attributes. This too may increase loading time if the browser decides to download all the font files specified.
Do mirroring at the network layer via DNS, like most CDNs do. This requires network setup, but your CSS would be unchanged, and it's most transparent to the browser, requiring no extra downloads.
Google Web Fonts is already employing the 3rd option, so I personally wouldn't bother if you're already using a CDN-hosted source. But it may be worthwhile if you're using fonts from a less reliable source. But if you're going to go through the effort to set this up for your fonts, why not set it up for all of your static resources (images, stylesheets, JS, etc.)? The most logical course of action is to just get a free or paid CDN to host all of your static assets on.
Related
There are several ways to embed a font on your web app.
Method A) Use google fonts CDN like this (in HTML):
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
Method B) Use your custom font like this (in CSS):
#font-face {
font-family: "Open Sans Regular";
src: url(../../fonts/OpenSans-Regular.ttf) format("truetype");
}
Method C) Convert your font to base64 string and use it like this:
#font-face {
font-family: 'Open Sans Regular';
src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAQeYABIAAAABv1gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAEHfAAAABwAAAAcaMGk4EdERUYAAOeAAAAAHQAAAB4AJgOxR1BPUwAA6XgAMk1MYsAAAAAyehMTA==) format('woff');
font-weight: normal;
font-style: normal;
}
Let's say I have 10 iFrames inside my web app and each one uses multiple fonts.
What are the pros and cons of each method for using inside the iframes?
If I want the best method for caching and load time which one do you recommend? I don't want that micro-moment that fonts are not loaded and the fallback fonts are used by the browser.
Note: Using Method C I can put all the fonts inside one CSS file and link it to each iframe.
Using a CDN for delivering your static files such as CSS, JS, images, and other files are commonly preferred. This is because once your files are cached on the CDN's edge servers, your site visitors will be delivered static content from the closest point of presence (PoP) instead of the origin server.
In the majority of cases, this shortens the distance between the client and the server and thus helps improve loading times without adding any additional HTTP requests. This also helps in other areas such as increasing redundancy, taking a load off the origin, etc.
Source
But it also depends on your site!
As Craig Buckler writes on sitepoint
CDNs are an incredibly useful resource but remember to consider the consequences. In practice, most sites will benefit if they load jQuery, the HTML5 shim, and font files from a public CDN. For busier sites, the speed improvements and cost savings of a private CDN are hard to ignore.
I am using Nunito Sans for the English version of a website and saw here: https://localfonts.eu/?s=Nunito+Sans&post_type=product
that there is also a Bulgarian version of the font, which is exactly what I need.
I tried downloading and adding it into my project folder.
#font-face {
font-family: NunitoSans;
src: url('fonts/NunitoSans-Light.ttf');
}
body {
font-family: NunitoSans;
}
Unfortunately that did not have any effect.
Replace the existing source URL with the new URL you created by
uploading each file.
By default, the source URL location is set within the downloaded Web
Font Kit. It needs to be replaced by the location on your server.
Ref:
https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website
When I run my project locally on Visual Studio 2013, Font Awesome Icons work. However when deployed they are absent.
When run from the server, the IE developer tools shows the Css coming in but there is NO CALL to the fonts. No 404 error! No 403 error! Nothing. It's like the Css is skipping over the #font-face declaration because it does not even try to call the EOT file.
Here are the facts:
Mime Types are all added to IIS 7.0 (eot, svg, woff, woff2, ttf)
The File structure to css is -- fonts > font-awesome > css
The File structure to fonts is -- fonts > font-awesome > fonts
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')
format('svg'); font-weight: normal;font-style: normal;
}
There's really not enough here to say for sure, but if I had to hazard a guess, I'd imagine you're including Font Awesome in a bundle, and the bundle path is breaking the font references.
The bundle path, i.e. ~/bundles/foo is a literal path. When the bundler joins and minifies everything it saves the file to that location. Style bundles typically use ~/Content/foo because of the tendency to reference things like images and fonts in ~/Content. Of course, bundling only happens in production, by default, so it won't affect you in development either way. I'm not sure what you're actually using as a bundle path, but that would be the first place I looked.
Another potential problem is that perhaps the bundle is not being loaded at all. This is common when you accidentally create a bundle path that maps to a physical directory. For example, if your bundle path is ~/Content/fonts, and you have a physical folder named fonts under ~/Content in your project, then your bundle will not be loaded and none of the scripts/css in that bundle would be applied to the page. Make sure your bundle path does not reference a physical directory.
I'm currently developing a browser extension for Chrome and Safari. To be more specific, a tooltip appears when the user hovers over certain keywords. Currently, i'm using #font-face with a link to certain fonts hosted on my website. The problem is - they take a long time to load. Is it possible to include fonts locally in the browser extensions instead of linking to them externally? Can you just package the fonts (or even images?) with the other extension files?
Yes you can, it is quite common. Just make sure you have permissions to distribute all fonts/images that you did not author. Owning a personal license doesn't count.
Every extension is saved locally, whether the code that makes it function requires internet access and server-side scripting or not. A Chrome extension is just a directory saved as a crx archive, which is literally a renamed zip file. The directory, along with the necessary Developer info and metadata, is just like that of any other site, with html, and css, javascript, fonts, images, etc. Obviously if your extension does use server-side scripts, those need to be hosted. I'm sure you know most of this if you are building extensions, but I am elaborating so beginners can follow along.
Generally speaking, fonts are tiny files (rarely over 200k unless they are grunge type, or you are embedding way more characters than necessary) and so if they are self-hosted and taking too long to load, the problem is likely with your host. If I were you, I would use Google Fonts which don't need to be self-hosted and are free.
There are several ways
to embed them, no matter which you option you choose. But here is an example of how to link to fonts stored locally within the .crx file, <style> tags go between the <head> tags:
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url("fonts/OpenSans-Regular-webfont.woff") format("woff");
}
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url("fonts/OpenSans-Italic-webfont.woff") format("woff");
}
</style>
Obviously, all paths are relative to the html file in your crx directory.
I have a web-app (Java/HTML based) on cloud. Client will be accessing it in IE/Chrome or Mozilla.
I want to use Helvetica or any similar fonts but they are, by default, not available in systems (windows/IE/Chrome/Mozilla). Is there a way I can ship these fonts with my project?
Secondly are there any good free similar ones, which dont require licensing?
But most importantly, how is it possible technically? Do I put that as resource in my web-app? If yes, how? and would it then prompt users to download or install it - because thats a no (we cant ship installables with this product).
Thanks
Unless you have a license for the font, you can't include it with your project.
You can use something like
Google Fonts - free
Font Squirrel - free. Option to include fonts that you have licenses for.
Type Kit - different licensing options.
Font Squirrel is a good way to "package" it because it is just CSS + files for the fonts, as the others are cloud-based. You can filter by "web fonts" and then download the "Web Font Kit" which has everything you need. Easy!
To complement MikeSmithDev’s answer with a technical point: You can use the #font-face technique (described on many pages also frequently asked about at SO) just as you would on a web page, but you need not refer to font files in a server. You can simply include the .wof, .eot etc. files in the application package and refer to them with relative URLs, as in
#font-face {
font-family: 'Source Sans Pro';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
}
body { font-family: Source Sans Pro }
Although expressions like “downloadable fonts” and “web fonts” are often used, the technique works fine this way, too, without needing any download (apart from getting the application of course) or Internet connection when using the application.
So the user will not be prompted for allowing download, and he does not need to install the fonts; they are directly used by the browser.