-
Posts
-
When optimizing our site for speed today, we found a 1.5 second load on the google fonts included in X.
How can we change these to local versions to speed things up. Easily?
I tried following some posts, and it required hacking core X css, etc. I want to just turn off the Google fonts, and serve them local. How can we do that?
Thanks!
ri
Hi Ri,
Thanks for writing in!
First you need to download the google fonts.
Second create fonts folder in your child theme and put all the files you have downloaded in there.All fonts files should reside in
themes/x-child/fontsFont files should include(.eot, .woff2, .woff,.ttf,.svg)
You can use this converter http://onlinefontconverter.com/ if a file is missing.
Third add the code below in custom > css box in the customizer.
@font-face { font-family: 'MyWebFont'; src: url('http://www.google.com/wp-content/themes/x-child/fonts/webfont.eot'); src: url('http://www.google.com/wp-content/themes/x-child/fonts/webfont.eot?#iefix') format('embedded-opentype'), url('http://www.google.com/wp-content/themes/x-child/fonts/webfont.woff2') format('woff2'), url('http://www.google.com/wp-content/themes/x-child/fonts/webfont.woff') format('woff'), url('http://www.google.com/wp-content/themes/x-child/fonts/webfont.ttf') format('truetype'), url('http://www.google.com/wp-content/themes/x-child/fonts/webfont.svg#svgFontName') format('svg'); } body { font-family: 'MyWebFont', Fallback, sans-serif; }Change webfont with font’s filename you have downloaded.
Change MyWebFont with your font name.You may refer to this link for more information.
https://css-tricks.com/snippets/css/using-font-face/
Hope that helps
Dear Team,
i did what you said in the post above, but now there is just an “error”, when i try to load the page (like <body>error</body>). I just wanted to load the Lato font from my server. If i refresh 4-5 times somehow the page work till i click a link. I`m not able to login in my dashboard.
Please help me out, don`t know what to do at this moment 🙁
Greetz
This reply has been marked as private.Hi There,
Since we could not login at the admin at the moment. Would you mind providing also an FTP credentials.
Thanks!
This reply has been marked as private.Hi there,
Thanks for writing in!
Yes, you can use following code in your child theme’s functions.php file:
// Deregister X Fonts function re_deregister_styles() { wp_deregister_style('x-font-custom'); wp_deregister_style('x-font-standard'); } add_action( 'wp_print_styles', 're_deregister_styles', 100 ); // Deregister WordPress Default Font function google_fonts_load_disable( $styles ) { $styles->add( 'open-sans', '' ); } add_action( 'wp_default_styles', 'google_fonts_load_disable', 5 );Thanks!
superb, thx!
You are welcome.
Hallo,
I did what you wrote above, and it’s worked. This is the code in the customizer:
@font-face {
font-family: ‘Lato’;
src: url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Lato-Light.eot’);
src: url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Lato-Light.eot?#iefix’) format(’embedded-opentype’),
url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Lato-Light.woff2’) format(‘woff2’),
url(‘http:/www.caorologio.com/wp-content/themes/x-child/fonts/Lato-Light.woff’) format(‘woff’),
url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Lato-Light.ttf’) format(‘truetype’),
url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Lato-Light.svg#svgFontName’) format(‘svg’);
}body h4 {
font-family: ‘lato’, Fallback, sans-serif;
font-weight: 300;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
font-family: ‘lato’, Fallback, sans-serif;
font-weight: 700;
}@font-face {
font-family: ‘Esteban’;
src: url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Esteban-Regular.eot’);
src: url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Esteban-Regular.eot?#iefix’) format(’embedded-opentype’),
url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Esteban-Regular.woff2’) format(‘woff2’),
url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Esteban-Regular.woff’) format(‘woff’),
url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Esteban-Regular.ttf’) format(‘truetype’),
url(‘http://www.caorologio.com/wp-content/themes/x-child/fonts/Esteban-Regular.svg#svgFontName’) format(‘svg’);
}h1 h2 h3 h5 h6 h13 h17{
font-family: ‘Esteban’, Fallback, sans-serif;
}The problem is that at the moment in the navbar the font Lato is light. I would like to have it regular in the navbar and light in the body.
Could you help please?
HI there,
No need to embed Lato font as it’s available in Customizer. Please enable ‘Custom Fonts’ under Customize -> Typography.
You can select font weight for both body and navbar under Customize -> Typography
Hope it helps.
Not work and too many errors on Firebug.
Steps
- Install child theme
- Create folder /wp-content/themes/x-child/fonts
- Put Andalus.eot Andalus.svg Andalus.ttf Andalus.woff Andalus.woff2
- Customize->Csutom->CSS put code:
@font-face { font-family: 'AndalusFont'; src: url('http://excellenting.com/wp-content/themes/x-child/fonts/Andalus.eot'); src: url('http://excellenting.com/wp-content/themes/x-child/fonts/Andalus.eot?#iefix') format('embedded-opentype'), url('http://excellenting.com/wp-content/themes/x-child/fonts/Andalus.woff') format('woff'), url('http://excellenting.com/wp-content/themes/x-child/fonts/Andalus.woff2') format('woff2'), url('http://excellenting.com/wp-content/themes/x-child/fonts/Andalus.ttf') format('truetype'), url('http://excellenting.com/wp-content/themes/x-child/fonts/Andalus.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'AndalusFont', Fallback, serif; } - Save changes and try
- Also try others options such add:
h1 h2 h3 h4 h5 h6 h13 h17{ font-family: ‘AndalusFont’, Fallback, serif; }
After reload page, not get results and see this questions:
- Fonts not show
- Theme fonts on code with Google apis.
<link id="open-sans-css" media="all" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.2.2" rel="stylesheet">
And others fonts on code…
Hello There,
The font is not working because you have inserted an invalid custom css code. Please use this code instead:h1, h2, h3, h4, h5, h6 { font-family: 'AndalusFont', serif; }Hope this helps. Kindly let us know.
Well.
That it’s response for option two.
Correct by
h1, h2, h3, h4, h5, h6 { font-family: 'AndalusFont', serif; }But problem persist.
- Page show on code links to goggle font apis… tha’t it’s ot good. A original question, it’s use local fonts instead google fotns, for get more speed, and for see page on China for example (China block google). If theme use my local font but on code try use google fonts, not get correct solution for block and speed
<link rel=’stylesheet’ id=’open-sans-css’ `href=’//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.2.2′ type=’text/css’ media=’all’ />
…
…
<link rel=’stylesheet’ id=’x-font-standard-css’ href=’//fonts.googleapis.com/css?family=Lato%3A400%2C400italic%2C400%2C300%2C400%2C700%2C700italic&subset=latin%2Clatin-ext&ver=4.0.4′ type=’text/css’ media=’all’ />`
Thanks for your support
Hi there,
This loads font families in Customizer, If you disable custom font option the source would be :
<link rel='stylesheet' id='x-font-standard-css' href='//fonts.googleapis.com/css?family=Lato%3A400%2C400italic%2C700%2C300%2C300%2C700%2C700italic&subset=latin%2Clatin-ext&ver=4.0.4' type='text/css' media='all' />And if you enable it you’ll see this in page source:
<link rel='stylesheet' id='x-font-custom-css' href='//fonts.googleapis.com/css?family=Lato%3A400%2C400italic%2C700%2C700italic%7CLobster%3A700%7CLato%3A300%7CLato%3A300&subset=latin%2Clatin-ext&ver=4.0.4' type='text/css' media='all' />Hope that helps.
