fbpx

Trick or Treat - 30% OFF - Coupon Code: SCARY20 Download Now

Welcome, Guest
Username: Password: Remember me

TOPIC: The best way to load your Google font locally ?

The best way to load your Google font locally ? 4 months 3 weeks ago #22673

  • Chacapamac
  • Chacapamac's Avatar
  • Offline
  • Elite Member
  • Posts: 166
  • Thank you received: 4
  • Karma: 0
I look at the great video Chetan made for Joomdev at

After downloading my fonts from Google (in True Type TTF) I try the Font generator Squirrel show in the video — www.fontsquirrel.com/tools/webfont-generator on the standard Optimal settings.
Note: You have an Expert mode that probably work better, seem pretty complicated for me

Sadly, in Squirrel, the mode Optimal do not load the entire font subsets needed (of a particular fonts) under one font family name. This prevent the use of basic css rules like style:normal / italic or even the weight (400, 600, 700,,,) or the strong/bold easily

As example this is the CSS proposed by Squirrel/Optimal
@font-face {
    font-family: 'overlockregular';
    src: url('overlock-regular-webfont.woff2') format('woff2'),
         url('overlock-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'overlockitalic';
    src: url('overlock-italic-webfont.woff2') format('woff2'),
         url('overlock-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
That way if you want you have to use the family name —> font-family: 'overlockitalic'; and font-weight or style will not work


For Google fonts , I find —> google-webfonts-helper.herokuapp.com/fonts


The big advantages here is the css code to embed the font and its subsets in ONLY one family name and the ability to use the normal font styling (Weight, style...)
• You use 'Overlock' for the family and all subsets
• You can use the font-style (normal, italic, strong, bold....}
• You can use the font-weight (400, 500, 600....}

Way easier and optimize:

Look at the css:
/* overlock-regular - latin */
@font-face {
  font-family: 'Overlock';
  font-style: normal;
  font-weight: 400;
  src: local('Overlock Regular'), local('Overlock-Regular'),
       url('../fonts/overlock-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/overlock-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overlock-italic - latin */
@font-face {
  font-family: 'Overlock';
  font-style: italic;
  font-weight: 400;
  src: local('Overlock Italic'), local('Overlock-Italic'),
       url('../fonts/overlock-v9-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/overlock-v9-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

==================================================
ALSO a hint, because as a new user of the great JoomDev Astroid system (long time RocketTheme user before)
Use font-display to load faster
css-tricks.com/almanac/properties/f/font-display/
To prevent “flash of invisible text”, better to use font-display in your stylesheet.
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.212 seconds