How to turn off Google fonts and enable local fonts?

Follow

Angelo

• February 07, 2019 14:41
• Edited

Hello everybody,

How to turn off Google fonts and enable local fonts? Because China's firewalls have restrictions on Google services, Chinese customers will be slow to open web pages or can't open.

0

• 

  Support

  • February 07, 2019 14:51

  Very good question Angelo!

  We documented 2 solutions on how to add a custom font in below article, but suggestions from other users are welcomed. 

  https://support.weltpixel.com/hc/en-us/articles/115001525713-How-to-add-and-use-a-custom-font-in-Pearl-Theme-Magento-2- 

   

   

  0

  Comment actions Permalink
• 

  Angelo

  • February 08, 2019 14:31
  • Edited

  Hello welt,

  I uploaded the Source Sans Pro font to app/design/frontend/Pearl/weltpixel/web/fonts

  https://google-webfonts-helper.herokuapp.com/fonts/source-sans-pro?subsets=latin

  Please check here  http://prntscr.com/miehez

   

  I added the font code to the css file, app/design/frontend/Pearl/weltpixel/web/css/source/wp_custom.less

  Please check here  http://prntscr.com/miepow

  updated the background cache, and the browser cache, but the site still references the Google aip font library.

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Questrial:900,400%7CSource+Sans+Pro:400&subset=latin">

  Is this correct? 

   

  0

  Comment actions Permalink
• 

  Koncz Szabocls

  • February 13, 2019 13:31

  Hi Angelo,

  If your site still references the google api font it means in the backend you still have custom google fonts selected for your store view. Are you 100% sure that you removed all the custom google fonts from the WeltPixel FrontendOptions admin section?
  
  Check Google Font Family options for all :

  H1, H2, H3, H4, H5, H6, Default, Default Buttons, Form Inputs [input-text|select|textarea|input-radio|input-checkbox]  Sections.

  Regards,

  Szabi

  1

  Comment actions Permalink
• 

  Support

  • February 13, 2019 13:58
  • Edited

  To extend previous answer.

  After adding the custom font, make sure to go to Admin -> Frontend Options -> H1, H2, H3, H4, H5, H6, Default, Default Buttons, Form Inputs and for the Google Font Family option, set "Use Predefined". Here is a screenshot where you can find this option in admin: http://prntscr.com/mkkcu8 

  Make sure to change this for all sections under Frontend Options where google fonts are defined.

   

  Also, if you need to apply the custom font to specific elements in your store you can use the class defined above, in our example from previous article it is class font-face. If you need to add the new font for a Heading, here is a short example that you can add to the Child Theme.

  h1 {font-family: ''Playfair Display''}

  1

  Comment actions Permalink
• 

  Angelo

  • February 14, 2019 16:15

  Thanks Koncz Szabocls and Welt Support.

  By the way, Child Theme does it mean wp_custom.less?

  app/design/frontend/Pearl/weltpixel/web/css/source/wp_custom.less

   

  For example:

  -----------------------------------

  // Custom less for extending Pearl/weltpixel theme can be added in this file in the new theme
  // Leave it empty here // had to add some class, otherwise the compiler didn't work properly
  .weltpixellighting {
  color: black;
  }

  h1 {font-family: ''Playfair Display''}

  -----------------------------------

  0

  Comment actions Permalink
• 

  Support

  • February 15, 2019 13:26

  Here is the documentation section providing details on how to use the child theme.

  https://www.weltpixel.com/resources/PearlTheme/User-Guide-WeltPixel-Pearl-Theme-Magento2.html#how-child-custom 

  0

  Comment actions Permalink

Please sign in to leave a comment.