#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.
Related
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');
}
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
It's possible to use downloaded fonts on a local web page (XAMPP) without internet connection ? I need this to see the fonts because some people maybe can't afford internet connections and they use theirs computers only to work.
This is the web font: http://openfontlibrary.org/en/font/didact-gothic
I tried this with no luck: http://css-tricks.com/snippets/css/using-font-face/
Thanks in advance!!!!
EDIT
I think the place where the files are stored is the problem because I have this .css and no work. The place of all my files is /opt/lammp/htdocs
#font-face {
font-family: 'DidactGothicMedium';
src: url('didactgothic.eot');
src: url('didactgothic.eot') format('embedded-opentype'),
url('didactgothic.woff') format('woff'),
url('didactgothic.ttf') format('truetype'),
url('didactgothic.svg#DidactGothicMedium') format('svg');
}
p {
font-family: 'Didact Gothic';
font-weight: normal;
font-style: normal;
padding-left: 25px;
padding-right: 25px;
}
input {
font-family: 'Didact Gothic';
font-weight: normal;
font-style: normal;
}
Yes it's possible, if you just go to your localhost in the browser it should work just like when you would port forward it and go there with your own IP/Domain.
If that #font isn't working for you, make sure 1) You use Chrome/Firefox (Internet explorer only supports certain file exentions (.otf I think).
and 2) You have the right path setup!
Also maybe some of your html/css code could help us awnser your question :)
You have to use a web font kit, which you can download from sites like http://convertfonts.com, include the style and font files and the font will work on local development, but for that you first need a otf or ttf file for the font to download the webkit.
just make a fonts folder, like you have css, js folder and in your css file just include /fonts/, like
#font-face { font-family: 'MuseoSans-100';
src: url('fonts/museosans-100.eot');
src: url('fonts/museosans-100.eot') format('embedded-opentype'),
url('fonts/museosans-100.woff') format('woff'),
url('fonts/museosans-100.ttf') format('truetype'),
url('fonts/museosans-100.otf') format('opentype'),
url('fonts/museosans-100.svg#MuseoSans-100') format('svg');
} just an example
if your css file is in another folder make the changes to url, correspondingly
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
I was finally able to get my site to show an Arabic font, but it is a default font that I don't want.
With the help of the SO community I found out about Dejavu fonts. I went to their website and downloaded a sans serif zipped folder. I am assuming I have to upload something to my server. If so which file/s do I upload? And what do I write in my html file to "reference" the fonts to my site? I opened all the files in the zip folder and only one of them indicated that I can download the font. But I don't need to download it on my computer. I need to upload it to the cloud so that it will be on my website.
Any ideas?
Also How can I upload the Dejavu folder here so that people can see it and know what I am talking about?
#font-face and #font-face Font Squirrel Generator
If you wish to use font embedding (and #font-face), then you need to present the font in different formats if you wish cover most platforms. See e.g. The Essential Guide to #font-face.
But there’s a much simpler way: just declare your preferred fonts (after checking that each of them covers all the characters you use) in your font-family declaration in CSS. Not all people would then see the text in DejaVu (only those who have got it along with e.g. Linux of OpenOffice or who have separately downloaded an installed it). The overhead of downloading a largish font, or several fonts, is not ignorable, especially when using e.g. slow mobile connections.
Expanding on bookcasey's point:
Check out the #font-face kits at Font Squirrel. There are several DejaVu kits available. Kits include the CSS and the DejaVu files in pretty much every available format you can use on the web. Put the font files in whatever folder you like and alter the CSS accordingly.
For example, I store my font definitions in /css/fonts.css and my fonts in /fnt/FontName/
From fonts.css
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.svg#DejaVuSansOblique') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.svg#DejaVuSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.svg#DejaVuSansBoldOblique') format('svg');
font-weight: bold;
font-style: italic;
}
Using the font is then simply:
body {
font-family: 'DejaVu Sans',sans-serif;
}