Basic question, I know I can either Download or link to a font, for example google fonts. Is there a benefit between choosing to link or download the font?
I am creating a web application with a few short paragraphs in RoR, but it's just a general question.
The only benefit I can imagine, is having a guarantee that your font will always be available if you download it and store it in your project directory. Whereas, if you link to a font there is a (rather low) possibility that the link will break in the future or something along those lines.
Related
I've been using Font Awesome for a little bit on some of my projects and I have created a bunch of my own icons that I can link locally without a problem; however, I want to be able to link the icons I made from an online source like Font Awesome do and serve them publicly, how exactly is this achieved?
You need to have icon in SVG format that you have created,
then you can use this, it will generate all the necessary font types, CSS/Sass/Less/Stylus , HTML demo page and Name font according to your wish.
Gruntt Web Font
I did a bit of Googling for you to find somewhere for your to offer your files.
You will need to create a font from your SVG files, I use fontastic.me and it's very good, but you could use another service.
You will then need to create a package of your files, and put it on a CDN service so that other people (or just you) can use it publicly. You can try using something like https://www.jsdelivr.com/ or look into how to set up your own CDN.
I am want to use a font that is not popular. this font exist in google fonts and also in Photoshop. I am confused because both ways will have some loading time, I know that images are not the good way to go for texts (but at least the image will be internal), however google font will introduce some overhead as the font will be requested from an external source
which method has good performance (in terms of load speed):
1) using Photoshop to write the text and save it as an image than use the image in my webpage? or
2) using google font?
3) and if using google font. do i have to download the font file with all formats and then put it in my website folder? or I just use the html link tag to? which one is more efficient.
and thanks a lot in advance.
Google fonts are CDN, so they take up zero of your server resources (while images do). That said, Google fonts can slow down your page. But typically only when you're using a handful of fonts. I wouldn't be concerned at all with 1 or 2. Overall, either method would be little to no concern in the end.
However, using images for text is a flash back to 1998. Bad practice. More so on your end, as updating text, changing design, running A/B tests, accessibility, SEO, and maintaining the site in general will become a major pain in the a**. Simplest answer? Avoid it.
Directly from Google Fonts site:
Tip: Using many font styles can slow down your webpage, so only select
the font styles that you actually need on your webpage.
Tip: If you choose only the languages that you need, you'll help
prevent slowness on your webpage.
Example usage:
// include in the <head/> of your website
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
then:
// in your css:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }
Done. Very little resources.
Use google fonts.
The Google Fonts CDN is built to deliver content, content loaded from it will probably load faster then it would if it was on your server.
You don't have to download the font, or worry about browser support, simply add the <link> tag to your HTML.
You should NOT use images to display text, for several reasons:
Screen readers can't read text in an image
Size. Depending on the size of the image and font, the image may be larger than the font file.
A major pain to update
UX problems. i.e. Users can't copy text, select, etc.
When should you use images?
When you need a text effect that can't be achieved with CSS, SVG, or canvas(Not that many). As noted by #Stephen P in the comments below, you should still add text, just visually hide it with CSS
You can download google fonts .ttf file or whaterver format you like or supports and call that file instead of accessing from a url. Which will be much much faster. And yes images are truely bad as it makes impossible for search engine to read.
I try to load fonts via CDN, but requirements for a font do not have that. We are using Montserrat Light in some areas and my preference per Google fonts doesn't allow for the 'light' version. Instead, I found it HERE, but no CDN capability. So how do you all deal with this for your users without having them having to download or whatever. Looking for suggestions?
Thanks much.
A CDN is just "someone else's site" that you use for efficiency reasons. If no CDN is available, the obvious choice to put the data for online retrieval is "the same place you've put the rest of your website": just like how you have .html and .css files sitting in directories that are accessible to the outside world, you add your font file(s) in similar fashion and then just load them by relative URL.
I need to include Gurmukhi.ttf font which was provided to me. I tried to find answer to my question but found something like this #font-face : converting and displaying a font (CityBlueprint) but no solution.
At first I tred to generate the font on this site
http://www.fontsquirrel.com/tools/webfont-generator
but got the following error "The file gurmukhi.ttf is blacklisted by the Generator. Webfonts from other distributors cannot be regenerated."
Then I used
http://www.font2web.com/
It generated the required data package and I included fonts, how it was shown in demo.html. But nothing happened. By default the browser uses its own fonts, and Gurmukhi are ignored. Interesting thing is that font in demo.html is also ignored by browsers.
Then I was provided another font type Optima.ttc. I have converted it to ttf format.
http://www.fontsquirrel.com/tools/webfont-generator
"Linotype has requested that their font Optima Regular be blacklisted by the Generator. You will not be able to convert this font."
http://www.font2web.com/
Here I only got 2 files and in info.html there was the following:
Sorry, the vendor of Optima nova Regular doesn't allow us to convert this font
But click here to use the Optima nova Regular web font for free
Tip: Click on the purple Sign Up for Free! button and then click on the FREE PLAN link
As I understand both of these files are not free?
This are commercial fonts and you need to purchase atleast the web license in order to use them legally (altough you could always make the .ttf conversion yourself locally without using web generators and avoid the blacklisted check, but this is still not a legal solution and the font is still subject to copyrights).
If you don't have the budget to spend on font license, you could always use a free alternative to Optima Nova - there are similar typefaces available for free - try to search for free alternatives that could suit your design (mind that the alternative font may not be of the same quality and may not support as many glyphs).
I have been using Calibri font in my web pages for too long using #font-face but the thing is including such big font file reduces web page loading speed drastically! But I have seen that a font in ttf format is more bigger than the one in opt or open-type format (Am I right or not?). That's why I want a font converter. Can anyone provide me a one or can give me a link to get it. Please help me out.
Thanks in advance!
I've been having wonderful success using Google's Web Fonts They don't give you a a million options font-wise, but they're loaded off of Google's screaming fast CDN which undoubtedly will deliver them much faster than 99% of the hosting solution us mere mortals have access to. Since they are served from the edge off a different host than the rest of your content, the load advantage should be quite impressive.
As easy as it is to find a font, copy, and paste, I've had little reason to fight with anything else.