Home Forums Pro Themes Education Hub Pro Change Site Title & Site Tagline Font

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #74066
    Nick Piper
    Participant

    I need to change the site title and tagline font to ‘bayer sans’, sans-serif. I keep trying to change it in the additional CSS option, but can’t seem to get the code right. I know ‘bayer sans’ isn’t a traditional font, but my boss said we must absolutely have it in those two lines of text. Is there a plugin that would allow me to change it easily? Or would a simple CSS change work better?

    #74084
    wensolutions
    Keymaster

    Hello @npiper,

    To use your desired font at first you need to load it at first and to load the font please follow below given steps:

    step 1: Go to this link :https://fonts.google.com/ and click the โ€œ+โ€ sign of your desired font.

    Screenshot:
    http://prntscr.com/ir1f86

    Step 2: After clicking on the โ€œ+โ€ sign, you will get the box at the bottom right corner. Click it then a box will appear. Here go to import tab and copy the import code and fonts below it and paste them in Admin Panel > Appearance > Customize > Additional CSS.

    Screenshots:
    http://prntscr.com/ir1gsq

    Hope this helps.

    Best Regards!!

    Have a good day ๐Ÿ™‚ .

    #74117
    Nick Piper
    Participant

    My desired font was not on this page. I can download the font from another page, Is there a plugin that will let me upload fonts?

    #74136
    wensolutions
    Keymaster

    Hello @npiper,

    Can you please provide the font and your backend access so that we can do it for you?

    Provide your backend detail in our official email address given below:

    wensolutions@gmail.com

    Thank you.

    Regards!!

    #74175
    Nick Piper
    Participant

    The font I need is called Bayer Sans. Iโ€™ve attached the ttf file for the font. Unfortunately I cannot give backend access to our website. It is hosted locally and it is on a virtual machine, so you would not be able to access it. Is there a plugin that you could recommend? Or could we use a TeamViewer seesion to resolve this issue?

    #74410
    wensolutions
    Keymaster

    Hello,

    First of all our sincere apology for the delay in replying to you.

    You cannot only rely on TTF font format for the web. You need to convert TTF font format to eot, svg, woff, and woff2 which you can easily convert from online font converter tools like

    https://onlinefontconverter.com/

    Here please check font-face checkbox too, which will provide CSS to import your font.

    For this create a child theme by using the plugin like given below:

    https://wordpress.org/plugins/wp-child-theme-generator/

    Now, place your font files that are converted by online converter inside your child theme by creating a folder name “font“. Copy the CSS inside the file font.css generated by online converter tools and paste it inside child theme style.css file.

    Now you need to change the URL of the CSS you copied

    @font-face {
      font-family: 'Example';
      src: url('font/Example.woff') format('woff'),
           url('font/Example.ttf') format('truetype'),
           url('font/Example.svg#ArialMT') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    As you can see, we have added “font” in URL for importing the font inside font folder.

    This steps can be very tricky but if you follow the step thoroughly then you can achieve what you desire but for changing the font family of your site title and description you need to add CSS providing the font family for that exact classes.

    Hope you will replicate the steps easily.

    Best Regards!!

    #75324
    Nick Piper
    Participant

    I successfully created a child theme, I converted the font to the specifications that you gave me, I placed the font folder in the child theme folder, and added the css to my website but it isn’t working.
    Here’s what is in my css:
    ——————————————————————————————————-
    /*Imports BayerSans font*/
    @font-face {
    font-family: ‘BayerSans’;
    src: url(‘font/BayerSans.eot’);
    src: url(‘font/BayerSans.woff2’) format(‘woff2’),
    url(‘font/BayerSans.woff’) format(‘woff’),
    url(‘font/BayerSans.svg#BayerSans’) format(‘svg’),
    url(‘font/BayerSans.eot?#iefix’) format(’embedded-opentype’);
    font-weight: normal;
    font-style: normal;
    }
    /*changes the font to bayer sans*/
    .site-title {
    font-family: ‘BayerSans’, sans-serif;
    }
    .site-description {
    font-family: ‘BayerSans’, sans-serif;
    }
    ——————————————————————————————————-
    Something just isn’t clicking right, I believe it is a syntax error. When I pull up the DevTools in Google Chrome and select the site title and site description the bayersans is overriding the default font so I know it is written correctly, but it isn’t showing. Please help

    #76998
    wensolutions
    Keymaster

    Hello @npiper,

    Since you are could not do it, you can consider hiring the developer so that it can be solved within few hours.

    To hire a developer please refer to below given link:

    http://themepalace.com/hire-a-customizer

    Thank you ๐Ÿ™‚

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