[Interactive] Using Local Font

[emlakdefterim]

Hi,

How can I use fonts locally that I have already downloaded from the links inside of the https://fonts.googleapis.com/css?family...  and uploaded to the server?

I mean, I prevented https://fonts.googleapis.com address but I still want to continue to use fonts like Open Sans  and Merriweather. I uploaded the woff2 files to server. 

I choose these fonts in the typography menu in the theme options. How can I achive to continue to use these fonts.

These are the examples of such font css inside the https://fonts.googleapis.com/css

/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

 

Thanks.

[Jitendraa]

Hello,

This is slightly outside of our scope of support so please understand that this customization is not fully supported by us.

However here is the basic logic:

First you need to convert the fonts (eg. TTF or OTF format) that you have to use with @font-face. Use one of the following tools: http://fontface.codeandmore.com or http://www.fontsquirrel.com/fontface/generator to generate the fonts.

Download the generated zip and you should have the following font formats: .eot, .svg, .ttf and .woff. Upload those font files to your server (ie. create a 'fonts' under your root folder or 'wp-content' folder).

 

Now you need to specify the font in your CSS. The CSS can be added via Theme Option > Styling Options > Custom CSS

 

It will look something like this:

 

@font-face {
    font-family: "FontName";
    src: url("http://yoursite.com/fonts/fontname.eot");
    src: url("http://yoursite.com/fonts/fontname.eot?#iefix") format("embedded-opentype"),
        url("http://yoursite.com/fonts/fontname.woff") format("woff"),
        url("http://yoursite.com/fonts/fontname.ttf") format("truetype"),
        url("http://yoursite.com/fonts/fontname.svg#fontname") format("svg");
}

Now you may specify which elements to apply the custom font. Sample code:

 

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "FontName";
}

Please note that beyond that we are unable to assist you as this is a very personalized customization.

Thank you.

[Mili]

Hello,

Thank you for contacting MyThemeShop today.

For this you would need a custom solution, unfortunately it is outside of our scope of support.

Perhaps this tutorial may help: https://mythemeshop.com/blog/wordpress-speed-optimization/#avoid-google-fonts-and-server-fonts-locally

Looking forward to helping you. Thank you.

[emlakdefterim]

Hi,

While I'm selecting a Google font in the typography menu, theme's retrieving Google fonts online via https://fonts.googleapis.com/css?family=... link, a dynamic css file is created.

I just want to skip retrieving Google fonts from https://fonts.googleapis.com/css?family=... link via google-typography/google-typography.php plugin whics is inside your theme.

I've already uploaded the fonts. How can I direct to these local fonts instead of using https://fonts.googleapis.com URL.

You are the only authority that can help with this issue. Could you please help about this situation?

Thanks in advance.

 

[Jitendraa]

Hello,

This is slightly outside of our scope of support so please understand that this customization is not fully supported by us.

However here is the basic logic:

First you need to convert the fonts (eg. TTF or OTF format) that you have to use with @font-face. Use one of the following tools: http://fontface.codeandmore.com or http://www.fontsquirrel.com/fontface/generator to generate the fonts.

Download the generated zip and you should have the following font formats: .eot, .svg, .ttf and .woff. Upload those font files to your server (ie. create a 'fonts' under your root folder or 'wp-content' folder).

 

Now you need to specify the font in your CSS. The CSS can be added via Theme Option > Styling Options > Custom CSS

 

It will look something like this:

 

@font-face {
    font-family: "FontName";
    src: url("http://yoursite.com/fonts/fontname.eot");
    src: url("http://yoursite.com/fonts/fontname.eot?#iefix") format("embedded-opentype"),
        url("http://yoursite.com/fonts/fontname.woff") format("woff"),
        url("http://yoursite.com/fonts/fontname.ttf") format("truetype"),
        url("http://yoursite.com/fonts/fontname.svg#fontname") format("svg");
}

Now you may specify which elements to apply the custom font. Sample code:

 

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "FontName";
}

Please note that beyond that we are unable to assist you as this is a very personalized customization.

Thank you.

[emlakdefterim]

Hi Jitendraa,

Yes, I knew this solution I had to solve this situtation manually as you explained. Thank you.

I would also like to make this solution as a significant suggestion about performance in your themes. Instead of using google-typography/google-typography.php for the fonts, you may use them locally as I did. Download once, use anytime This increases the speed dramatically.

Regards.

[Jitendraa]

Hello,

Thank you for the suggestion. I am adding a note about this to the Development team and they'll look into this during the future updates.

Thank you.