Base solution for your next web application
Open Closed

Using Open Sans locally #2069


User avatar
0
alukaszewski created

I've been banging my head against a wall for the last few hours trying to use the Google Open Sans font WITHOUT the browser having to download it from Google each time. I have tried including the @font-face directive with the font-family 'Open Sans' using local url for the .woff and .woff2 formats - but my ASPNETZERO pages are always going to themes.googleusercontent.com to download three .woff files.

The components-rounded.css is what seems to be setting the use of the 'Open Sans' font and causes the browser to go to Google.

/* Set default body */
body {
  color: #34495e;
  font-family: "Open Sans", sans-serif;
  padding: 0px !important;
  margin: 0px !important;
  direction: ltr;
  font-size: 14px; }

If I remove the font-family line from the above, then no content is pulled from Google but then the page does not use the Open-Sans font. I'm not having any issues using my own custom fonts.css and other fonts I have downloaded locally, but I seem to be struggling just to accomplish what should be a simple thing - using 'Open Sans' from local .woff/.woff2 files.

Could anyone suggest the correct .css and/or which files to download and where/how to reference them within the project?

Thanks!


7 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    There is a css file named "fonts-open-sans.css" in the web project. If you check it's code it tries to use online resource, if it's not available it uses local files. You can change it's order if you want.

  • User Avatar
    0
    alukaszewski created

    Thanks, but I don't have the "fonts-open-sans.css" file anywhere in my project.

    I have a fonts.css (which I think I put there...) which implements the fonts as follows;

    /* open-sans-300 - latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 300;
      src: local('Open Sans Light'), local('OpenSans-Light'),
           url('../fonts/open-sans-v13-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
           url('../fonts/open-sans-v13-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* open-sans-regular - latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open Sans'), local('OpenSans'),
           url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
           url('../fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* open-sans-600 - latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 600;
      src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
           url('../fonts/open-sans-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
           url('../fonts/open-sans-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* open-sans-700 - latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      src: local('Open Sans Bold'), local('OpenSans-Bold'),
           url('../fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
           url('../fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Can you check this locations according to your project type ?

    If you are using ASP.NET MVC 5 <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/tree/dev/src/MyCompanyName.AbpZeroTemplate.Web/Content">https://github.com/aspnetzero/aspnet-ze ... eb/Content</a>

    If you are using ASP.NET Core <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/tree/dev/src/MyCompanyName.AbpZeroTemplate.Web.Mvc/wwwroot/fonts">https://github.com/aspnetzero/aspnet-ze ... root/fonts</a>

    Your styles seems OK, I think they are not the source of your problem.

  • User Avatar
    0
    alukaszewski created

    I am running an older version of the ASPNETZERO project, 1.6.1, and I have the /Content folder but that only contains the font-awesome.css. It's really frustrating me to try and find out where the directive to Open Sans on Google is coming from.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Can you search this text in your solution ? "fonts.gstatic.com"

  • User Avatar
    0
    alukaszewski created

    I found the culprit!

    /libs/jquery-jtable/themes/metro/blue/jtable.min.css

    contains a list of references to the Open Sans font family hosted by "themes.googleusercontent.com". So I've removed that whole chunk from the CSS and the admin tables still seem to render in Open Sans (probably as I have these in my own fonts.css).

    Thanks for your help!

  • User Avatar
    0
    ismcagdas created
    Support Team

    I'm glad that you have found it :).