Custom Fonts for Text

  • Resolved macmwebdesign

    (@macmwebdesign)


    8 years, 7 months ago

    I am working on my site locally.

    I want to add custom fonts to the text I add on the slider. I just do not know where to put the css code (@font-face, etc): in the plugin css file or in my child theme css?
    I have tried both. I tried adding the code to both, with custom classes defined, but nothing has worked.
    It probably would be most helpful if I knew what selector(s) the text is labeled.

    https://www.ads-software.com/plugins/crelly-slider/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Fabio Rinaldi

    (@fabiorino)

    You should include your @font-face in an external style sheet and import it following this tutorial: https://codex.www.ads-software.com/Plugin_API/Action_Reference/admin_enqueue_scripts

    Then, to apply a font to an element, click on the element, scroll down a bit to find the custom CSS text area and write:
    font-family: YourFontName;

    If you don’t import the @font-face, the font will work correctly in the frontend but will be displayed as Verdana in the backend.

    Thread Starter macmwebdesign

    (@macmwebdesign)

    Thanks for responding, sorry this is 3+weeks later.
    I have looked at the link you gave me, did some research.
    I am a newbie with WordPress and this is what I came up with, but it does not work.
    My site is local, so I cannot give you a link.

    Here is what I have in my fonts.css file, located in a fonts directory of my child theme:

    @font-face {
    font-family: "optimusprincepssemiboldRg";
    src: url('/optimusprincepssemibold/optimusprincepssemibold-webfont.eot');
    src: url('/optimusprincepssemibold/optimusprincepssemibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/optimusprincepssemibold/optimusprincepssemibold-webfont.woff2') format('woff2'),
         url('/optimusprincepssemibold/optimusprincepssemibold-webfont.woff') format('woff'),
         url('/optimusprincepssemibold/optimusprincepssemibold-webfont.ttf') format('truetype'),
         url('/optimusprincepssemibold/optimusprincepssemibold-webfont.svg#optimusprincepssemiboldRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

    Then in my functions.php file in my child theme I have the following:

    <?php
/** Child Theme additional functions
 * Custom Fonts are enqueued here
 *
 */
 function my_theme_styles() {
wp_register_style( 'fonts', get_stylesheet_directory_uri(). '/fonts.css' );
wp_enqueue_style( 'fonts', get_stylesheet_directory_uri(). '/fonts.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );
?>

    In the Crelly Slider Plugin, on a text layer of a slide, I added a custom CSS as follows:

    font-family: optimusprincepssemiboldRg;
 color: #ffffff;
 font-size: 40px;

    The color and font size are correct, but the custom font was not used.
    Can you see what I did wrong?
    I appreciate your help.

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    Is the font displayed correctly in the frontend? Because, by using wp_enqueue_scripts, you’re not including the CSS in the administration page but in the frontend only.

    Thread Starter macmwebdesign

    (@macmwebdesign)

    It is not.

    When I use browser tools and inspect the element however, it shows computed style correctly:

    font-family: optimusprincepssemiboldRg;
 color: #ffffff;
 font-size: 40px;

    but it is not displaying.

    Not sure what I am missing.

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    Maybe the font isn’t included correctly.
    Do these two tests:

    1) Open the page source code (CTRL + U) and check if in the <head> tag the font is included.

    2) If the font is included, try to right click on a text in the page (it doesn’t matter what text) and click inspect element. Add to that text this CSS: font-family: optimusprincepssemiboldRg;
    Does it work?

    Thread Starter macmwebdesign

    (@macmwebdesign)

    I do not see it in the head tag.
    I checked on other plugins with similar questions, and tried what they recommended.
    I used a plugin: Use Any Font.

    Worked great!

    I really would like to know how to code this myself, though.

    Thanks for your help. I really am liking this slider!

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    Glad to see that you’ve fixed the problem!

    If you want to learn how to include a CSS without an external plugin you should follow a basic tutorial that explains the basis of WordPress coding. This is the official documentation: https://codex.www.ads-software.com/
    If you need some help, feel free to ask.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Custom Fonts for Text’ is closed to new replies.

Tags