AUTHOR: Marin Bratanov
DATE MODIFIED : April 24, 2018
DATE POSTED: January 09, 2017
HOW TO:
Use the Material skin without an active Internet connection.
DESCRIPTION:
The Material skin requires an active Internet connection in order to download the Roboto font. If the client does not have access to the cloud, the page may load slowly while the browser waits for the request to time out. You may also get errors in the console similar to net::ERR_NAME_RESOLUTION_FAILED for the fonts.gstatic.com domain requests.
The guidelines Google provide for using their fonts indicate that these fonts are to be requested from their cloud. This is the first and foremost reason why such requests are needed, and why we have documented this information.
The second reason is the several variations of this font are extremely large and will, effectively, double the Telerik assembly size, should we bring them with our controls. This is not an acceptable solution for the many clients, especially those working in a SharePoint environment. Another downside to this is that such a resource copy is likely to lag behind updates Google implement.
SOLUTION:
There is a way to override the way we load the Roboto font in order to reference local files:
Note: You can use only the code snippet below and put it in your own site stylesheet in order to override the font we use. In this case you will still have the requests to the cloud, but they will not break the skin appearance. This may be an acceptable solution in some cases and it is easier to implement and maintain.
@font-face {
font-family
:
'Roboto'
;
font-style
normal
font-weight
400
src
local
(
),
'Roboto-Regular'
url
(/path/to/Roboto-Regular.woff)
format
'woff'
(/path/to/Roboto-Regular.woff
2
)
'woff2'
);
unicode-range
: U+
0000
-00
FF, U+
0131
, U+
0152
-0153
02
C
6
DA, U+
DC, U+
2000
-206
F, U+
2074
20
AC, U+
2212
2215
, U+E
0
FF, U+EFFD, U+F
000
}
500
'Roboto Medium'
'Roboto-Medium'
(/path/to/Roboto-Medium.woff)
(/path/to/Roboto-Medium.woff
An important note on this approach is that you will need to ensure the correct font variation is available. You can use the following site as a starting point: https://fonts.google.com/specimen/Roboto. When you click the Select This Font in the top right-hand side you will get a popup with links that contain the appropriate code and URLs for your browser, depending on the fonts it supports (e.g., woff, ttf, eot). This is where you will need to tweak your setup. Prevent the references to https://fonts.gstatic.com If the Content Security Policy is enabled in IIS, you may experience calls to https://fonts.gstatic.com. The presence of the font-src 'self' section causes Chrome to evaluate all fonts on the page and this will also trigger requests to the Google cloud for the Roboto font, even if it is not used by the page (i.e., the Material skin is not used). You can find more details on the topic in the documentation: UI for ASP.NET AJAX and CSP.
Resources Buy Try