Forums » SEPHP Feature Requests

Remove dependence on Google Fonts for Source Sans Pro

    • 77 posts
    May 4, 2020 4:47 PM EDT

    FEATURE REQUESTED

    Remove the dependence on Google Fonts for getting a copy of the Source Sans font, instead serving a copy from the local site.

     

    ADVANTAGES

    You don't release data to Google showing you are using a site, and the fonts will be loaded as long as a user can use your site.

     

    DISADVANTAGES

    You might be forcing the user to download and hold an extra copy of the fonts. Given they amount to less than 1MB, this isn't that onerous given the privacy enhancements.

     

    IMPLEMENTATION

    Note: I am new to Social Engine, but I think I am obeying all the default conventions.

    Download this zip file https://google-webfonts-helper.herokuapp.com/api/fonts/source-sans-pro?download=zip&subsets=latin&variants=600,700,900,regular&formats=woff,woff2.

     

    Unzip the contents into a new /externals/source-sans-pro/ folder

     

    Create the file /externals/source-sans-pro/source-sans-pro.css and paste the following CSS code.

    /* source-sans-pro-regular - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('/externals/source-sans-pro/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/externals/source-sans-pro/source-sans-pro-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* source-sans-pro-600 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url('/externals/source-sans-pro/source-sans-pro-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/externals/source-sans-pro/source-sans-pro-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* source-sans-pro-700 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('/externals/source-sans-pro/source-sans-pro-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/externals/source-sans-pro/source-sans-pro-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* source-sans-pro-900 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 900; src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url('/externals/source-sans-pro/source-sans-pro-v13-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/externals/source-sans-pro/source-sans-pro-v13-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

    Go to the file /application/themes/serenity/theme.css

     

    Replace Line 1

    @import url('//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900&display=swap');

    with

    @import '/externals/source-sans-pro/source-sans-pro.css';

     

    Repeat the process for /application/themes/serenity/original.theme.css

     

    Ta-dah!


    This post was edited by abuk at May 4, 2020 4:51 PM EDT
    • Moderator
    • 4676 posts
    May 5, 2020 5:05 AM EDT

     Nicely formatted except for the two lines for the font but it'll be ok

    I like this request as there are many privacy minded sites these days and with Google's new changes that further invade privacy, we might see more who want this. The only thing is, it bulks up the script and some won't want it. So, we need options. For this, we would need to figure a way for admin to have a setting "disable google external fonts" and enabling that would then install the fonts on their server. I also am not sure if we are allowed to distribute the google fonts. Perhaps we need to have a link in the setting to send the client to get the zip of their font with instructions on how to load it? That seems hard for non-tech clients. Need some brainstorming on how to implement this in the best way for the non-tech minded.