I am making a music blog and I'd like to be able to use BebasNeueRegular on my Wordpress site. Obviously, this is possible considering goldenscissors does it on their site (the titles for the widgets on the side and the title of the post are both using BebasNeueRegular).
I did a Google search for this, and only found how to install Google Web Fonts to Wordpress, but BebasNeueRegular is not a Google Web Font. Any help?
P.S. you can download the font here.
Read about font-face.
In your example, you can see by yourself this fragment in the style.css:
#font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
}
Related
Using Grails version 2.4.4. and trying to load CSS resource from URL
http://myAppName.com:7777/myApp/assets/style.css
/myApp/assets/style.css
I've set in style.css:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?t0751g');
src: url('../fonts/icomoon.eot?t0751g#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?t0751g') format('truetype'),
url('../fonts/icomoon.woff?t0751g') format('woff'),
url('../fonts/icomoon.svg?t0751g#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Beside this, I added few other options for proper icon load.
Assets structure:
/assets/fonts/icomoon.ttf (and all other icomoon files are here)
/assets/stylesheets/style.css
when I use 2. url it loads my custom icons normally but when I set the 1. url in <style> as shown above, icon loading fails.
Both url-s should point to the same file and I don't understand why this is not working. Anyone knows what I am doing wrong ?
Any help will be appreciated!
So I found out that fonts does not support cross-origin domain, and I used icomoon icons as font to import it from another domain. On the other hand, i found out you can use Fontello which generates embedded JS and automatically fixes this issues, so it is generally better to use.
I'm recreating an website. That old website uses two different webfont I'd like to take over to the new one.
The first font is one of googles web fonts. It is embedded using googles following suggested code (just a CSS file containing the actual usage):
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
This works on both the old and the new website!
The other font however is causing problems in firefox on the new website, but displaying perfectly fine on the old one. It's embedded using the exact same code, except that I'm using absolute paths on the new website:
#font-face {
font-family: 'bebasneue-webfont';
src: url('http://example.com/fonts/BebasNeue-webfont.eot');
src: url('http://example.com/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('http://example.com/fonts/BebasNeue-webfont.woff') format('woff'),
url('http://example.com/fonts/BebasNeue-webfont.ttf') format('truetype'),
url('http://example.com/fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
Why is the google font displayed correctly while the other one just won't load?
I have set up a website. I was hosting it on webs.com, but they started to place an ad bar on html-only hosting. As it would not look good, I changed it to 000webhost. Since I uploaded everything to 000webhost, I can't make the fonts to load.
webs:
http://bluescreen-ofdeath.webs.com/
000webhost:
http://bsod.comze.com/
I have tried pointing the ttf fonts from my webs account, but it won't load.
As the 000webhost take a day to answer free accounts, I decided to ask you. Is there anything I am missing?
Edit: Here is an example of my #Font-face
#font-face {
font-family: 'fixedsys500c-webfont';
src: url('../font/fixedsys500c-webfont.eot');
src: url('../font/fixedsys500c-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fixedsys500c-webfont.woff') format('woff'),
url('../font/fixedsys500c-webfont.ttf') format('truetype'),
url('../font/fixedsys500c-webfont.svg#fixedsys500c-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
The font(s) have to be imported before the stylesheet, as Google Web Fonts dictate.
Instructions: To embed your Collection into your web page, copy the
code as the first element in the <head> of your HTML document.
Don't use single quotes. Your fonts will work nicely. It's so easy, look below:
#font-face {
font-family:Arial;
src:url(Arial.ttf)format(.ttf);
}
remind it, internet explorer only works with EOT font files.
As far as I can tell, 000webhost only accepts .woff files.
.ttf and .eot do not work for me
I've built a custom wordpress theme that uses font-face for typography. All works fine when running in localhost, but after uploading the theme to a live site, font-face fails in FF. Still works fine in IE9
I've tried hardcoding the CSS link in header.php, moving the font files out of the theme to the site root, using a separate stylesheet for the #font-face declaration, but nothing wants to work.
Any ideas?
Cheers
Nathan
Did you include all the font files necessary? Different browsers support different types. For example, here's one I used on a site recently:
font-face {
font-family: 'GentiumBookBasicRegular';
src: url('_/fonts/GenBkBasR-webfont.eot');
src: url('_/fonts/GenBkBasR-webfont.eot?#iefix') format('embedded-opentype'),
url('_/fonts/GenBkBasR-webfont.woff') format('woff'),
url('_/fonts/GenBkBasR-webfont.ttf') format('truetype'),
url('_/fonts/GenBkBasR-webfont.svg#GentiumBookBasicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
A fantastic resource for this is http://fontsquirrel.com - they'll even let you upload fonts that they don't have and they'll create the package and the css for you.
I am trying to embed my custom font in my website, got a link folder from http://www.fontsquirrel.com/fontface/generator this site after uploading a font on this site, it gives me this CSS:
#font-face {
font-family: 'VoltaEFTU-Regular';
src: url('voltaeftu-regular-webfont.eot');
src: local('☺'),
url('voltaeftu-regular-webfont.woff') format('woff'),
url('voltaeftu-regular-webfont.ttf') format('truetype'),
url('voltaeftu-regular-webfont.svg#webfonttKmU3jX8') format('svg');
font-weight: normal;
font-style: normal;
}
But it's not working on my machines. How can I embed a font in my website?
Thanks
Mayur Mate
If I were doing it, I would take a look at how the Google Font API works…
#font-face code looks correct, but if you want use this font example in <p> you must use font-family: 'VoltaEFTU-Regular'; in this element. Look into generated demo.html file.