Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

HowTo: replace google fonts with @fonts


  #1  
Old Jul 25, 2014, 02:20 AM
marklevine
 
41 posts · Jun 2010
I live and work in China. Recently the government decided to block all services by Google, not just search. As a result, sites that use google fonts have terrible performance problems. I've been going back to my old sites and replacing Google fonts with @fonts. I'm offering this technique as a service to the community. I hope it helps and I take no responsibility for errors in my typing or thinking. Also, this technique requires free services from several websites which may or may not be available in your area.

I wouldn't recommend doing this unless your site performance in China is important.

Basically, I take steps to identify which fonts are needed, download them from Google as TTF files, convert to @fonts at fontsquirrel, upload to the theme, modify styles, and finally remove references to google fonts:

1. In the dashboard, visit CSS Settings - Add Google Fonts

Get the names and weights of fonts added to the theme.

2. Visit google.com/fonts

Find each font and add it to a collection. Once complete, download the collection as a zip file. Unzip to reveal all the TTF files.

3. Visit fontsquirrel.com - Webfont Generator

Click Add Font and choose a TTF to upload. Repeat as needed until all fonts are added. When done, click "download kit".

4. Move fonts into local theme

Unzip the squirrelfont zip file to review a whole bunch of WOFF files and a lot more. Move these files into a folder called "fonts". Now move the "fonts" folder into the local root of a theme folder, wherever that might reside on your computer.

5. FTP files to the website

With your favorite FTP client, open a connection to the web server and navigate local and remote to the root of the theme folder. Upload "fonts".

6. Add fonts to the theme

In the dashboard, visit Montezuma Options - Head - Insert Code. Put the following into Top, replacing the name of the theme folder:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/{THEME_FOLDER}/fonts/stylesheet.css" media="screen" />

Note that stylesheet.css is a file that is generated by fontsquirrel and ought to have been uploaded in step 5.

7. Use the new fonts

For example, if you included "Open Sans" in step 3, then you'll have a font named "open_sansregular" which you can use in your CSS styles. To make sure of the available fonts, review the file fonts/stylesheet.css. You must go through all available CSS files and replace occurrences of "Open Sans" with "open_sansregular".

I used "Open Sans" as an example. Replace with all the fonts that you are actually using.

When complete, save Montezuma settings. To ensure that all references to "Open Sans" are eliminated, visit Export Import - Export Settings in the Current Montezuma Settings field. Try to find "Open Sans". If it is found, the you have to locate it's use and replace it with the new font. Continue until all references to Google Fonts have been eliminated.

8. Remove Google Fonts

In the Dashboard, visit Montezuma Settings - CSS Settings - Add Google Fonts.

Clear out the fields where you specified which Google fonts to load. Save Montezuma settings.

9. Verify completeness

Visit a page on the site and view source. Look for signs of Google fonts. You can also inspect elements to ensure that font resources are loading from the fonts directory inside the theme. Check the classes on the body as well as any other places that your Google fonts might have bene showing up.

If all is clear, you've made the Internet a worse place (thanks, China!) but improved your load time in China.
  #2  
Old Jul 25, 2014, 11:42 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Nice writeup! I just made it a sticky.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
china, fonts, google fonts



Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem with Google Fonts? squinx Atahualpa 3 Wordpress theme 2 Oct 13, 2013 05:43 PM
How to Use Google Fonts API crogers32 Atahualpa 3 Wordpress theme 2 Aug 30, 2010 07:05 AM


All times are GMT -6. The time now is 12:03 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.