|
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.
|