Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #718517

    I am having some issues adding a custom font to my website.
    Want to use the font https://fonts.google.com/?query=trajan which I have bought and uploaded to the website.

    I then added the following code to by quick css but can not get the font to show up in the editor.

    @font-face {
        font-family: 'TrajanPro3-Regular';
        src: url('wp-content/uploads/font-organizer/TrajanPro3-Regular.otf') format('otf')
        font-weight: normal;
        font-style: normal; }

    Thanks for your help,
    Jon

    #718519

    creds

    #719087

    Hi Jon,

    I’m not sure what you mean by that it’s not showing up in the editor? Did you try adding it so that it will be added to the theme fonts? (Purchase code hidden if logged out) -theme-options/”>http://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -theme-options/

    Best regards,
    Rikard

    #719103

    Rikard,

    Thanks for the info on Google Fonts.
    Unfortunately the font Trajan is not an open source Google Font.
    I bought it separately and have it as an .oft font file which is where my issue comes in.

    I found info on the forum saying to upload it https://www.fontsquirrel.com and convert it somehow but most purchased fonts are blocked from being uploaded there. So in short I’m not really sure how to add it.

    Jon

    #719271

    Hi Jon,

    I see, I didn’t know they had paid fonts, that’s why I gave you that link. If you add the font via CSS it won’t appear in the backend of the site unfortunately, you would have to use CSS to display it. You can assign a class for the font for instance:

    .trajan {
      font-family: 'TrajanPro3-Regular' !important;
    }

    And then add that class to the elements you want to use the font. (Purchase code hidden if logged out) -for-all-alb-elements/” title=”http://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -for-all-alb-elements/”>http://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -for-all-alb-elements/

    Best regards,
    Rikard

    #720474

    Rikard,

    Is there are way to be able to add a Custom CSS Class to a Special Header element?
    I don’t see the field in the editor.

    Jon

    #720683

    Hey!

    Please take a look here
    http://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -for-all-alb-elements/

    let us know if we can do anything else

    Cheers!
    Basilis

    #722161

    Basilis,

    Thanks that worked like a charm, however, the font isn’t changing even after uploading it and adding the CSS Class to the Special Headers.

    Here is all of the CSS I have on the font

    @font-face {
        font-family: 'TrajanPro3-Regular';
        src: url('wp-content/uploads/font-organizer/TrajanPro3-Regular.otf') format('otf')
        font-weight: normal;
        font-style: normal; }
    
    .trajan {
      font-family: 'TrajanPro3-Regular' !important;
    }

    Then I added the CSS Class of .trajan to the Special headers, but no luck

    Thanks
    Jon

    #722166

    Hi!

    I would suggest to change the url(”);
    to a full URL and not like that, it will make it work properly.

    Thanks a lot

    Regards,
    Basilis

    #722177

    Basilis,

    No luck that way either unfortunately.
    I even removed all Advanced Styling from the headers in the Enfold menu to make sure I wasn’t overriding the CSS Class somehow.

    Jon

    #722205

    I was able to get the headers to use the custom font on the desktop version of the site using the free Use Any Fonts plugin.

    I would love to get it to work without the need for a 3rd party plugin, so I could use the CSS Class to be able to apply the font to the Menu/Navigation. This method would also allow the custom font visible on mobile I assume?

    Jon

    #723357

    Hey!

    I noticed the things that might have caused it not to work or have problems.
    1.) Since you have replaced the url it’s already good but you forget to add the semi-colon at the end of this code:
    src: url('wp-content/uploads/font-organizer/TrajanPro3-Regular.otf') format('otf')

    2.) You need to have different formats for it to work properly in different browsers, currently it’s otf as you can see in the code, this should be the complete code:

    @font-face {
        font-family: 'FuturaStdHeavy';
        src: url('fonts/FuturaStdHeavy.eot');
        src: url('fonts/FuturaStdHeavy.eot') format('embedded-opentype'),
             url('fonts/FuturaStdHeavy.woff2') format('woff2'),
             url('fonts/FuturaStdHeavy.woff') format('woff'),
             url('fonts/FuturaStdHeavy.ttf') format('truetype'),
             url('fonts/FuturaStdHeavy.svg#FuturaStdHeavy') format('svg');
    }
    

    I suggest you convert the otf file you have here: https://everythingfonts.com/font-face it should give you all the files needed after conversion and it will have a css file which you can use to copy and paste it in Quick CSS and just replace the urls.

    Cheers!
    Nikko

    #910419

    Can you help me with the process above. I have the css for my font as above but im struggling with what files to load and how to link it all. Thanks

    #910530

    Hi,

    Sure, can you try to create a separate thread and reference the this thread there. Then give us temporary admin access, so we can check your site further, just post the details in private content so it will only be visible to moderators and the thread creator (which will be you when you create a new thread).

    Best regards,
    Nikko

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.