- This topic has 7 replies, 2 voices, and was last updated 6 years, 3 months ago by
.
-
Posts
-
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?
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/ir1f86Step 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/ir1gsqHope this helps.
Best Regards!!
Have a good day 🙂 .
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?
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:
Thank you.
Regards!!
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?
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!!
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 helpHello @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 🙂
- You must be logged in to reply to this topic.
