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
#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.
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!
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
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
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;
}