Is there a way to load typekit fonts dynamically, much like the Google Font API?
That is, how can I declare dynamically on each page the font name in a css link and load just the font(s) that are required for that page, instead of adding fonts into a kit and the loading the whole kit.
I have found a solution, posting it here in case it is useful for someone else:
I will use the Typekit API to dynamically create a new 'kit' (i.e. javascript file) for every different combination that my app requires, instead of including all of them in one big 'kit'.
See: https://typekit.com/docs/api/kits
Thanks anyway for your answers!
You could write a server side script that, depending on the page, will generate a different css file with the font-family rule(s) you wish.
Then you could use #import to bring this rule into your main css file.
TypeKit has recently introduced a way that users may find useful to perform functionality similar to what you are looking for but doing it in a very easy way without having to use the API. They call it Dynamic Subsetting.
As I write this it is only available for East Asian Fonts, however, there is a workaround to use it with other TypeKit fonts. The workaround comes from this site.
Add a East Asian Font such as Source Han Sans Japanese. This will automatically convert the kit to a dynamic kit.
Select each font and under the Character Set options choose Dynamic Subsetting for each font.
Remove the East Asian Font.
Publish Kit.
Even if you remove the East Asian Font, the kit will remain a Dynamic Kit.
Related
A web design company design website for me. However, it largely uses Google font Montserrat and Lato, which lead to totally 40 font files(about 1.4MB) to be loaded when users open my website. And based on GTMatrix, 82% data transfer and 56.1% requests are for font files, which slow down my website greatly.
Therefore, I want to find some web safe fonts to replace Montserrat and Lato, so that:
The replacement fonts should look similar to the original fonts.
The replacement fonts should be available in most of the visitors' systems.
It is better to use a font stack so that there will be fallback fonts if these new fonts are not available on the visitors' systems.
In this way, the browser does not need to load additional fonts when user visit my website.
So, firstly, I try to find fonts similar to Montserrat and Lato, I use the following website:
http://www.identifont.com/
It does bring out 30 fonts similar to Montserrat. I call it set A.
Based in the following references, there are no standard list of web safe fonts:
Web Safe fonts - What exactly does that mean?
https://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts
What I use is a list at https://www.w3schools.com/cssref/css_websafe_fonts.asp, this list seems looks fine. I call it set B.
Now I try to find a font in both set A and B, with Excel. I can find nothing.
So my question is:
Is there a better way to find web safe font alternative to a given font?
Since there are no font appear in both set A and B, I plan to use my eye to check the similar fonts manually, I wonder if there is an easier way to do that?
The list of "web safe" fonts is really small and none look like Montserrat or Lato.
I'd advise you to stick with the fonts your designer picked. You don't have to load all weights (maybe only regular?) and you can host them yourself and use font-display: swap; so the impact on load time is minimized. If that still isn't acceptable you'd have to pick something like Arial or Verdana for a sans-serif that works on both Mac & Windows.
You probably don't need to change the fonts entirely, but you should only be loading the font styles and weights you are using on your website rather than loading all weights and styles. For example, if you are only using 400 and 700 weights in Lato, untick all of the other weights in Google Fonts.
You could also look at font loaders to help with those initial load times, for example: https://github.com/typekit/webfontloader
During development, and until clients have signed off on fonts, I use the external embed links Google Fonts provides. This combined with a SASS variable for the font face declaration in CSS makes it really easy to change fonts project wide if necessary.
As part of the final process for putting a site live once everything has been approved, I will investigate those external embeds and download the actual .woff2 files (plus related CSS) and add them to my own site files. This reduces the site's reliance on external links and makes the whole project more self contained.
I've just checked the project I'm currently working on (which uses three fonts in a variety of weights). All of the font files combined only add up to ~160k - nowhere near your quoted 1.4mb. At this size, and given modern network speeds and browser caching, I see no issue using web fonts.
My advice would be to optimise how your site pulls in the fonts you want to use, rather than looking for system based alternatives. If you are not comfortable doing the optimisation work yourself, I would get back in touch with the developers and ask them to fix the issue.
I am new to ReactJS. I am trying to display all the font families in a dropdown, so that if i select one of the font family the text (displayed in a SVG) font-family will change.
I know in .net we can use System.Drawing.FontFamily.Families to get all the font familes. Like wise in react is there anything? Or else is there any other way to do this?
Thanks in advance...
You want to get all the available fonts on current machine, right?
I think there is no way to do that.
But with some trick we still can list almost available fonts on the current machine with:
1. A list of fonts
Windows fonts
Mac fonts
Some common fonts
2. JavaScript font detector
http://web.mit.edu/jmorzins/www/fonts.html
You got the idea, right? Now we just need to check what fonts are available in our font list and display them in the dropdown.
If you are building a web application using React, then it is impossible. For that matter, it is impossible with any library or framework. There is no JS API exposed by browsers that allow you get a list of all the fonts installed in the system (It can be a security issue).
However, if you are using React to build a Desktop application using electron.js or node-webkit.js, then you can export a binding for system API call to JavaScript and get this list. But it is a very cumbersome process. (I thought of this because you are comparing .net API with Web API.)
In general, as #Jared suggested, that is what most of the online(web applications) tools do when they want to provide font-selection dropdown for users.
I want to use Archer font family on one of my sites. When I try to find the the font I see following two options:
http://www.typography.com/fonts/archer/webfonts/
http://www.cufonfonts.com/en/font/13323/archer-book
Typography has pay per use plan under which I can directly use the font.
On the other hand cufonfonts.com lets me download the webfonts for the Archer font family and I can use them directly on my site using #font-face. It is also free.
So can any one tell me if there is something that I may have missed out with the CufonFonts. Is there any downside to using the CufonFonts or if it is not legal. I have tried to use the CufonFonts and it works fine. So can someone please suggest the right way.
Note: I cannot use any substitute font for the Archer. That is a hard requirement. So either I use the free Cufonfonts or I'll have to purchase the typography plan.
The Cufon Fonts website declares the following in its DMCA page:
“All fonts on cufonfonts.com are uploaded by designers and they certify that they are the legal owner or representative of the font they upload. Unfortunately we do not have the technology and manpower to check the commercial or legal aspect of every font that is uploaded.”
Therefore, they are not the creators of the fonts, and they have no opinion on the legal aspect of the files they provide. It's up to you to figure out what to do with them legally.
Only the copyright owner of a font can tell you how you can legitimately use it, whether on a website, in a printed document or even in a logo. This is usually described in a legal document called EULA (End-User License Agreement), which you will receive from the font creator.
If you want to avoid legal problems, the right way to download a font is to obtain it directly from the font designer or from the font foundry, which may involve paying for them.
Archer, for example, is a commercial font by Hoefler and Co., so if you download it from the Cufon Fonts website and use it directly in your work without paying for it, you are violating the EULA of this font foundry.
This image show you the mean of rounded font
I want the web page only use web safe fonts
but these fonts are not beautiful.
since I want the page as consistent as possible to every user, I cannot use non safe fonts.
so I hope solution can be found in css
You may want to use #font-face rule. It allows loading custom typefaces.
I believe there is no other way to alter rendering of fonts using CSS.
The easiest and quickest (and cheapest) way of getting better looking fonts is through Google fonts http://www.google.com/webfonts/ However because they're free they're not always that great.
Alternatively for more professional fonts you can use a service such as https://typekit.com/ but this will cost you money.
I am very pleased with the Web Developer Toolbar and Colorzilla add-on. I like how I can use those features to easily detect the HTML structure and colors used in web pages. But in my search for a good CSS font detection tool, I haven't come across anything that works in a similar way. Does anyone know of something out there that I have missed?
I use a tool called WhatFont for this purpose
It shows various information about the font used in each DOM element, such as font family, color, size and even where the #font-face files are served from. It is available in the form of a bookmarklet or a Chrome add-on.