Disable Google Font API calls at AJAX controls completely

3 posts, 0 answers
  1. Netrange
    Netrange avatar
    1 posts
    Member since:
    May 2016

    Posted 08 Sep Link to this post

    Hello,

    Because of design requirements we don't want to load fonts from google fonts api.
    We are using Telerik AJAX controls V2017.2.711.45.

    I already read the following article about providing the Roboto font, if no internet connection exists. 
    But this solution only overrides the font but still calls the api and I want to completely remove the api calls.
    Mentioned reference:
    http://www.telerik.com/support/kb/aspnet-ajax/details/use-material-skin-without-active-internet-connection

    Even if I select a theme with no Roboto font in it (like Bootstrap for example) the api gets called.
    Is there a setting to disable this call?

    Thanks in advance

  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    600 posts

    Posted 13 Sep Link to this post

    We've decided to completely drop Roboto Font references from our code and instead provide an article how it can be included.

    The change is scheduler for 2017 R3 SP1. 

    Regards,
    Ivan Zhekov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Rumen
    Admin
    Rumen avatar
    13203 posts

    Posted 22 Sep Link to this post

    After additional research we decided to not remove the roboto font references to https://fonts.gstatic.com from the Material skin because:

    - this is going to be a huge breaking change
    - the Use Material Skin Without Active Internet Connection solution works properly, i.e. you can host a local CDN server and replace the references to the roboto font with references to a local file in the \skins\ajax\2017.3.913\common\fonticons.css file:

     

    @font-face {
      font-family'Roboto';
      font-stylenormal;
      font-weight400;
      srclocal("Roboto"), local("Roboto-Regular"),url(https://somelocalfont/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woffformat("woff"),url(https://somelocalfont/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
     
    @font-face {
      font-family'Roboto';
      font-stylenormal;
      font-weight500;
      srclocal("Roboto Medium"), local("Roboto-Medium"),url(https://somelocalfont.woffformat("woff"),url(https://somelocalfont/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }

     

    For your convenience I have recorded a video which shows the whole procedure: https://www.screencast.com/t/rPsVj953e0Z. As you can see the modification of the fonticons.css stopped the calls to https://fonts.gstatic.com so you can use this as a solution for your scenario.



    Kind regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top