Custom font on Wordpress not working - css

I'm trying to figure out why my custom font is not loading on WordPress (MAMP, Mac, localhost).
The fonts are stored in wp-content/themes/twentysixteen/fonts/
Then in wp-content/themes/twentysixteen/style.css I have the following CSS:
#font-face {
font-family: "Averta-Regular";
src: font-url("./fonts/31907B_A_0.eot");
src: font-url("./fonts/31907B_A_0.eot?#iefix") format('embedded-opentype'), font-url("./fonts/31907B_A_0.woff2") format('woff2'), font-url("./fonts/31907B_A_0.woff") format('woff'), font-url("./fonts/31907B_A_0.ttf") format('truetype');
}
html {
font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
}
Chrome shows me this:
It only works if I have the font installed on my operating system.

Try changing font-url to url on lines 3 and 4 of your CSS. It looks like it just isn't recognizing the source of the custom fonts you're trying to load.

You have to link that font in functions.php
Like this
wp_enqueue_style( 'custom', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Roboto' );

Download a ttf font, one available for commercial use, visit https://1001fonts.com/free-fonts-for-commercial-use.html?page=1&items=10 paste a copy into your theme and use #font-face just as you've done above. Everything should work just fine. While I was developing on my local server, everything was working fine. On publishing into public_html, the font refused to load. Had to change to a ttf, you can also try other web fonts format but the ttf works just fine. Better still you can use the google fonts.

I encountered something similar when I was using this wordpress uncode child theme and uploading custom fonts.
I realised it was because I didn't end the second src attribute with a ;
#font-face{
font-family: 'Lato';
src: url('fonts/Lato.eot');
src: url('fonts/Lato.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato.woff') format('woff'),
url('fonts/Lato.ttf') format('truetype'),
url('fonts/Lato.otf') format('opentype'),
}
Once I replaced it, the fonts worked. Stupid mistake but hard to spot after you work for a couple of hours.
#font-face{
font-family: 'Lato';
src: url('fonts/Lato.eot');
src: url('fonts/Lato.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato.woff') format('woff'),
url('fonts/Lato.ttf') format('truetype'),
url('fonts/Lato.otf') format('opentype');
}

Related

I can't load webfont

#font-face {
font-family: Han Sans;
src: url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff2) format('woff2'),
url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff) format('woff'),
url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.ttf) format('truetype');
font-weight: 500;
}
I uploaded some font files onto my webhosting, and trying to load it as webfont. But it seems that I can't use theese, and I can't even know why..
If this is an Adobe font, make sure you have your permissions are correctly set on the Typekit site.

Font-face not working in ubuntu for a site done with wordpress

Here is the thing I just uploaded to a remote server a site developed in wordpress with a custom web font using Font-face and it works fine in OS Windows and Mac the issue is when viewing the site in an Ubuntu, and I assume, others Linux enviroments.
This is the font-face chunk of code I use in the style.css
#font-face {
font-family: 'vijayaregular';
src: url('./estilos/vijaya-webfont.eot');
src: url('./estilos/vijaya-webfont.eot?#iefix') format('embedded-opentype'),
url('./estilos/vijaya-webfont.woff2') format('woff2'),
url('./estilos/vijaya-webfont.woff') format('woff'),
url('./estilos/vijaya-webfont.ttf') format('truetype'),
url('./estilos/vijaya-webfont.svg#vijayaregular') format('svg');
font-weight: normal;
font-style: normal;
}
And this is how I call the font type:
body{
background:#ffedbc;
font-size:12pt;
font-family: "vijaya", "open sans", Arial, Helvetica, sans-serif;
color:#970d34;
}
This issue only happens in Ubuntu, as I said before, the code doesn't seems to be loading any of the fonts but Sans-serif.
I leave the site so you can have a look, please nevermind the two stylesheets and two jQuery links that was just me trying crazy stuff.
here it is: www.baccotrattoria.com.co
Any responses will be welcome!
Thanks before hand!

Installing custom fonts using font face

I use Brackets code editor and in the live preview it works perfectly but once I upload it onto the actual site it defaults to Arial. I've put the font in the css folder but I just don't understand why it doesn't work on the live site.
Here is my code.
#font-face {
font-family: BMgermar;
src: url('http://example.com/css/BMgermar.TTF') format('truetype');
}
Thanks in advance.
You Most Upload The Font In five Formats To Work Perfectly like This Code
#font-face {
font-family: 'droidkufi';
src: url('../fonts/droidkufi/droidkufi-webfont.eot');
src: url('../fonts/droidkufi/droidkufi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/droidkufi/droidkufi-webfont.woff') format('woff'),
url('../fonts/droidkufi/droidkufi-webfont.ttf') format('truetype'),
url('../fonts/droidkufi/droidkufi-webfont.svg#droid_arabic_kufiregular') format('svg');
font-weight: normal;
font-style: normal;
}
And The Font Formats is:
eot
woff
ttf
svg
OR You Can Simply Import The fonts form https://www.google.com/fonts

Why are my font files not getting downloaded not loaded?

I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS

css font face not working at all

In one of my website I have used Ænigma Scrawl 4 BRK font(as it is showing in my photoshop font family box). Now I want the same font in my page. So for that I just went to FontSquiirel site for generate css style. There I got my css file with the font with different extensions like .svg, .ttf, .woff. I just paste all the fonts in my folder then I used the same converted css in my style.css file. The generated css was like this
font-family: 'nigma_scrawl_4_brkregular';
src: url('aescrawl-webfont.eot');
src: url('aescrawl-webfont.eot?#iefix') format('embedded-opentype'),
url('aescrawl-webfont.woff') format('woff'),
url('aescrawl-webfont.ttf') format('truetype'),
url('aescrawl-webfont.svg#nigma_scrawl_4_brkregular') format('svg');
font-weight: normal;
font-style: normal;
But after all that my font style has not been changed. I am checking in both firefox and chrome. I have cleared all the cache and cookies from my browser. Can someone kindly tell me what is the wrong here? Any help and suggestions will be appreciable. Thanks
#font-face {
font-family: 'nigma_scrawl_4_brkregular';
.
.
.
.
font-style: normal;
}
Try this
#font-face{
font-family : "myCustomFont";
src:url(aescrawl-webfont.ttf);
}
body{
font-family:"myCustomFont", Arial;
}

Resources