if ( ! function_exists( 'georgelois_custom_fonts' ) ) :
function georgelois_custom_fonts() {
wp_enqueue_style(
'georgelois-custom-fonts',
'https://www.example.com/explore/wp-content/themes/fonts/ywft-webfonts.css',
array(),
null
);
}
endif;
add_action( 'wp_enqueue_scripts', 'georgelois_custom_fonts' );

if ( ! function_exists( 'georgelois_editor_custom_fonts' ) ) :
function georgelois_editor_custom_fonts() {

    add_theme_support( 'editor-font-sizes', array(
        array(
            'name' => 'Valid Regular',
            'size' => 20,
            'slug' => 'valid-regular'
        ),
        array(
            'name' => 'Valid Bold',
            'size' => 20,
            'slug' => 'valid-bold'
        ),
        array(
            'name' => 'YWFT Morchin Regular',
            'size' => 20,
            'slug' => 'ywft-morchin-regular'
        ),
        array(
            'name' => 'YWFT Matter Medium',
            'size' => 20,
            'slug' => 'ywft-matter-medium'
        )
    ) );

}

endif

add_action( 'after_setup_theme', 'georgelois_editor_custom_fonts' );

add_action( 'after_setup_theme', function() {
if ( ! function_exists( 'wp_register_webfonts' ) ) {
return;
}
wp_register_webfonts(
array(
array(
'font-family' => 'Valid-Regular',
'font-weight' => '400', // Regular weight.
'font-style' => 'normal',
'font-stretch' => 'normal',
'src' => 'https://www.example.com/explore/wp-content/themes/fonts/valid-regular.woff2'
),
array(
'font-family' => 'Valid-Bold',
'font-weight' => '700', // Bold weight.
'font-style' => 'normal',
'font-stretch' => 'normal',
'src' => 'https://www.example.com/explore/wp-content/themes/fonts/valid-bold.woff2'
),
array(
'font-family' => 'YWFTMorchin-Regular',
'font-weight' => '400', // Assuming regular weight.
'font-style' => 'normal',
'font-stretch' => 'normal',
'src' => 'https://www.example.com/explore/wp-content/themes/fonts/ywft-morchin-regular.woff2'
),
array(
'font-family' => 'YWFTMatter-Medium',
'font-weight' => '500', // Medium weight.
'font-style' => 'normal',
'font-stretch' => 'normal',
'src' => 'https://www.example.com/explore/wp-content/themes/fonts/ywft-matter.woff2'
)
)
);
});

How do I remedy this so that only the fonts I have specified are loaded and NO others?? Server environment is very plain Ubuntu LAMP.

How do I remedy this so that only the fonts I have specified are loaded and NO others?? Server environment is very plain Ubuntu LAMP.

Currently i’m busy with the SEO from my website so trough google page speed insights i came on the point “make sure the text stays visible while loading webfonts”. So when i clicked on the hyperlink, i came on the site of google for avoiding showing invisible text. I thought i had to embed the @font-face code in my extra CSS. When i did this i couldn’t see my contact form anymore, other reviews and the hamburger menu didn’t work anymore on mobile version. Now i deleted all the CSS i got from Google but the problem stays..

Is there someone who knows how i can fix this?

Thanks in advance.

In the instructions it says, “If you’ve confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.”

Leaving aside whether or not “all this is correct” (I have an email into the company about that), how can I look at the .htaccess file and see if anything is being intercepted? I’m guessing I don’t want to open/edit the .htaccess file itself, but some sort of log that gets created by the process it implements? And if so, how? How can I troubleshoot this issue? Is there a plug-in that might give me this info? I looked around but I couldn’t find anything that spoke to this.

I am looking to solve the “Ensure text remains visible during webfont load” PageSpeed issue. I am aware that font-display:swap does the job, but there was never a @font-face rule in my theme code, so I′m trying to add it now.

I don′t think any fonts were ever uploaded to the website, so I′m not sure where to start here.

I tried going through the suggestions PageSpeed audit provided me with to eliminate those fonts, so I came up with this query (for one of the fonts):

@font-face {
	font-family: 'Poppins';
	src: url 
        (https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2
        ) format('woff2');
	font-display: swap;
}

However, it didn′t remove this specific font from the issue pane. Do I have to specifiy font-style and font-weight? In that case, how can I know what are those exactly – I′m using a bunch of font weights on my pages.

Besides, there are also some Roboto fonts that I′m not using at all – is there a way to rather eliminate them completely?

I would be really thankful for some direction here – I′m familiar with a few webdev basics, but am still a very rookie level.

This is the code I am using:

@font-face {
font-family: ‘The Stylish Babes’;
src: url(‘TheStylishBabes.woff2’) format(‘woff2’),
url(‘TheStylishBabes.woff’) format(‘woff’),
url(‘TheStylishBabes.ttf’) format(‘truetype’),;
font-weight: normal;
font-style: normal;
}

The font files are uploaded to my child theme folder.

Any thoughts on what might be causing this to happen? I’m sure it’s something simple or obvious, I just can’t figure it out!

1. The font folder is placed directly in the theme folder.

2. The following is placed at the top of style.css:

@font-face {
font-family: "sitetitle;
src: url("../Fonts/Raleway-Black.ttf");
} 

3. To be sure I am using the correct call from style.css I placed a system font that is not used in the theme as the first alternate. That way I can tell that my call for the font is going to the right place.

Is the font folder in the correct place or is my css call wrong?