developer.mdx

title	description	i18nReady
Theme / Plugin Developers	How to integrate Yabe Webfont into your theme or plugin	false

Yabe Webfont is developer friendly. You can easily integrate Yabe Webfont into your theme or plugin with the available function.

Get the font families

To get the font families, you can use \Yabe\Webfont\Utils\Font::get_fonts() function.

Example:

<?php
$fonts = \Yabe\Webfont\Utils\Font::get_fonts();

print_r($fonts);
?>

Output example:

Array
(
    [0] => Array
        (
            [title] => Telescope
            [family] => Annie Use Your Telescope
            [type] => custom
            [slug] => mvPKsIYENG
            [css] => Array
                (
                    [slug] => annie-use-your-telescope
                    [custom_property] => --ywf--family-annie-use-your-telescope
                    [variable] => var(--ywf--family-annie-use-your-telescope)
                )

            [variants] => Array
                (
                    [0] => Array
                        (
                            [weight] => 400
                            [style] => normal
                        )

                )

            [fallback_family] => 
        )

    [1] => Array
        (
            [title] => Kaushan Script
            [family] => kaushan-script
            [type] => adobe-fonts
            [slug] => whhq
            [css] => Array
                (
                    [slug] => kaushan-script
                    [custom_property] => --ywf--family-kaushan-script
                    [variable] => var(--ywf--family-kaushan-script)
                )

            [variants] => Array
                (
                )

            [fallback_family] => 
        )

    [2] => Array
        (
            [title] => Pacifico
            [family] => Pacifico
            [type] => google-fonts
            [slug] => B4o13c17Sv
            [css] => Array
                (
                    [slug] => pacifico
                    [custom_property] => --ywf--family-pacifico
                    [variable] => var(--ywf--family-pacifico)
                )

            [variants] => Array
                (
                    [0] => Array
                        (
                            [weight] => 400
                            [style] => normal
                        )

                )

            [fallback_family] => 
        )

)

CSS Variables

\Yabe\Webfont\Utils\Font::css_custom_property(string $family_name): string

You can get the CSS variables of the font added to the Yabe Webfont. $family_name is the font family name.

Example:

<?php
$css_custom_property = \Yabe\Webfont\Utils\Font::css_custom_property('Annie Use Your Telescope');

echo $css_custom_property;

// Output: --ywf--family-annie-use-your-telescope

?>

And you can use it in your CSS.

h1, h2, h3, h4, h5, h6
{
    font-family: var(--ywf--family-annie-use-your-telescope);
}