Site logo

Archived topic

Adding font do not work

29 replies · Started by Bart on January 10, 2023

Viewing posts 1–15 of 30

Hi

I am trying to add custom fonts to the generatepress, I add PHP function trough snippet and save and activate it however still when I am uploading files trough media I get the information that I cant do it... Can you help me please

Hi there,

which fonts are you trying to add ?

What file types are you trying to upload ? eg. woff, ttf etc.

Hi David

There is only one file and it is .ttf

Hi Bart,

It may be that a security plugin or security mod on your server is stopping those from being uploaded.

If you want to upload that, try accessing your wp-config.php file through FTP then add define('ALLOW_UNFILTERED_UPLOADS', true); inside the file.

Alternatively, unless you need very specific TTF styling options you may want to consider just loading .woff and .woff2 fonts instead as they are supported across all modern browsers.

And if you only have ttf fonts you can use a font convertor like the one at Font Squirrel to convert them: https://www.fontsquirrel.com/tools/webfont-generator

Great! I was able to upload TTF, WOFF and WOFF2 files however the font is not google font so i cant generate CSS for that. How do I now can use this font ?

You will need to write your own @font-face CSS.
Heres a template you can use for each font / font variant you have uplaoded:

@font-face {
    font-family: 'Your Font name';
    src: url('the_full_url_to_the_font_folder/fontname.woff2') format('woff2'),
         url('the_full_url_to_the_font_folder/fontname.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

If you select the font in the Media Library it will provide you the Full URL.

I did everything and still it does not appear in the typography ;(

Now in Typography > Font Manager.
In the FONT FAMILY NAME field just type in the Name you added in your @font-face CSS font-family.
DO NOT Toggle the Google Font API and just click add.

Then when you add New Typography you will be able to select your custom font

Awesome. It worked, It just not apply on the view when i build the page but when I publish it and view as a normal website font is there :) thank you

Last question, is there an easy way to justify text ?

You can tell WordPress to load the fonts in the editor by adding a PHP function.
Did you add the @font-face CSS to the Customizer > Additional CSS?

If so add this PHP Snippet:

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;
} );

If you added the CSS elswhere let me know.

For justifying text, where do you want to apply it ?
Is it across the site or just for specific paragraphs ?

Hi David

You are a magician :D It worked

Justify I would like to do to specific text blocks.

If you use a GenerateBlocks Headline block when you want Justified text, you can a) change the heading tag from a H2 to any text tag including the p and b) in its text align options it has justified.

Hi David

I do use the GenerateBlocks and I got only three options when aligning the text and its left center or right. I do use the newest version of the GB and GP but don't have the option to justify despite the headline block is H or P .

This archived topic is closed to new replies.