Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • November 29, 2016 at 9:08 pm #718517
    millertimesites

    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

    November 29, 2016 at 9:10 pm #718519
    millertimesites

    creds

    December 1, 2016 at 5:58 am #719087
    Rikard

    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? http://kriesi.at/documentation/enfold/register-additional-google-fonts-for-theme-options/

    Best regards,
    Rikard

    December 1, 2016 at 7:22 am #719103
    millertimesites

    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

    December 1, 2016 at 3:21 pm #719271
    Rikard

    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. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Rikard

    December 5, 2016 at 3:09 pm #720474
    millertimesites

    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

    December 5, 2016 at 9:04 pm #720683
    Basilis

    Hey!

    Please take a look here

    Turn on Custom CSS Class field for all ALB Elements

    let us know if we can do anything else

    Cheers!
    Basilis

    December 8, 2016 at 8:44 pm #722161
    millertimesites

    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

    December 8, 2016 at 9:02 pm #722166
    Basilis

    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

    December 8, 2016 at 9:19 pm #722177
    millertimesites

    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

    December 8, 2016 at 10:26 pm #722205
    millertimesites

    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

    December 12, 2016 at 8:54 pm #723357
    Nikko

    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

    February 9, 2018 at 10:23 pm #910419
    Dogmut

    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

    February 10, 2018 at 3:36 pm #910530
    Nikko

    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

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.