Guía completa para implementar el alojamiento local de fuentes en temas GeneratePress

Para mejorar la velocidad de carga del sitio web y proteger la privacidad, muchos webmasters optan por alojar sus archivos de fuentes localmente en lugar de recurrir a servicios externos como Fuentes GoogleEste artículo describe cómo descargar y alojar localmente fuentes en el entorno del tema GeneratePress. Este artículo describe los pasos específicos para descargar y alojar localmente archivos de fuentes en el entorno de temas de GeneratePress.

1. Descargue el archivo de fuentes

• hacer uso de Google Fonts Helper y otras herramientas para buscar y seleccionar las fuentes deseadas.

• Marque las variantes de fuente necesarias para no aumentar la carga de la página.

• Sáltate la copia del código CSS, descarga el archivo zip de la fuente y descomprímelo.

2. Cargar archivos de fuentes

WordPress La Mediateca restringe por defecto la carga de archivos de fuentes.

Recomendamos utilizar el plugin "Code Snippets" para evitar el riesgo de modificar directamente los archivos del tema.

Añadir un nuevo fragmento de código para el plugin que pega abrir los permisos de carga de archivos de fuentes para elfunción (matem.)Código.

Después de guardar y activar el fragmento de código, elmediatecaCargue todos los archivos de fuentes descomprimidos.

Añada lo siguiente PHP Código, permiso temporal de carga de archivos de fuentes abiertas (poner)subtema funciones.php (o gestionado con un plugin de fragmentos de código):

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff'] = 'application/x-font-woff';
    $mimes['woff2'] = 'font/woff2';
    $mimes['ttf'] = 'application/x-font-ttf';
    $mimes['svg'] = 'image/svg+xml';
    $mimes['eot'] = 'application/vnd.ms-fontobject';

    return $mimes.
} );

Suba el archivo de fuentes descomprimido, se recomienda borrar el código después de subirlo.

3. Obtener un enlace al archivo de fuentes

• Copiar cualquier archivo de fuentes en su totalidad URLpor ejemplo: http://your-site/wp-content/uploads/2019/02/font-name.woff2
• Elimine el nombre del archivo y conserve sólo la ruta del directorio como campo CSS Uso de la ruta.http://su sitio web/wp-content/uploads/2019/02/

4. Generar y añadir @font-face CSS

Volvamos al Google Fonts Helper para descargar archivos de fuentes.

• Rellene la ruta del directorio en Google Fonts Helper.http://your-site/wp-content/uploads/2019/02/

• Copie el código CSS completo generado.

• Pega en el backend de WordPress "Apariencia" → "Personalizar" → "Adjuntar CSS", o archivo de estilo del tema hijo.

5. Añadir fuentes locales a los temas de GeneratePress

• Vaya a "Apariencia" → "Personalizar" → "Tipografía".
• Añadir nombres de fuentes (con CSS) font-family (Consistente).

• Desactive la opción Google Fonts y active las fuentes locales.
• Establezca el rango de aplicación de fuentes y guarde para que surta efecto.

6. Hacer que las fuentes locales aparezcan en el editor de bloques de WordPress.

El editor de bloques no carga las personalizaciones por defecto @font-face CSS.

Si CSS está en "CSS adicional", añada el editor de inyección de código:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

Si el CSS está en un tema hijo style.cssañade el código:

add_filter( 'generar_estilos_editor', function( 1TP4Estilos_editor ) {
    $editor_styles[] = 'style.css';

    return $editor_styles;
} );

Una vez hecho esto, el editor mostrará las fuentes locales correctamente.

resúmenes

Las fuentes alojadas localmente mejoran la velocidad de carga y reducen las dependencias de terceros. Combinado con las características de tipografía del tema GeneratePress, completo conestilo caligráficoLos permisos de descarga y carga de archivos están activados,CSS La adición y configuración de fuentes de temas y editores permite un perfecto alojamiento local de fuentes, mejorando el rendimiento visual y de rendimiento de su sitio web.

Actualizaciones recientes

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres