Using Open Sans locally #2069

alukaszewski created 7 years ago

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)

0

ismcagdas created 7 years ago
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.

alukaszewski created 7 years ago

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+ */
}

0

ismcagdas created 7 years ago
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.
0

alukaszewski created 7 years ago

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.
0

ismcagdas created 7 years ago
Support Team

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

alukaszewski created 7 years ago

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!
0

ismcagdas created 7 years ago
Support Team

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

Have an answer to this question? Log in and write your answer.