I'm trying to simply embed a font that I have uploaded to my server.
Everything is being loaded correctly, but the wrong font is being displayed. I know this is happening because when I remove the #font-face code the rendered HTML font changes.
Here's my code, I've played around with so many different things in the last hour so shout out whatever you think might work. I've also tried .TTF files.
#font-face {
font-family: Joan;
src: url("../fonts/joan.otf") format('font/opentype');
}
body {
background: url('../images/bg.gif');
font-family: Joan;
}
http://www.fontsquirrel.com/fontface/generator
Wins for me so far in my related adventures.
Here's a website I'm developing with it as we speak: http://bigballoon.businesscatalyst.com/
You may have to put the font name in quotes. Also, for MSIE compatibility, you'll need to convert the font to .eot format. Here's "bulletproof" #font-face as per paulirish.com. You may need to adjust depending on full/postscript font name:
#font-face {
font-family: 'Joan';
src: url('../fonts/joan.eot');
src: local('Joan Regular'), local('Joan'),
url('../fonts/joan.otf') format('opentype');
}
Related
I am trying to import a font that I downloaded to my code using #font-face, the text is reading right however it's bypassing the downloaded font in my font family and going straight to the backup font, "Cursive". I don't know why this is happening because I've triple checked that it is linked to the right folder. Please let me know any thoughts you might have. Thanks.
enter image description here
#font-face usage
With the #font-face rule,you do not have to use one of the "web-safe" fonts anymore like font-family:'Poppins','serif'.The will be Stored as a Local font like font-family : Times New Roman,serif
In the #font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
To use the font for an HTML element, refer to the name of the font (myFirstFont) defined in the font-family property:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
I found a gorgeous font called Slim Joe on a webpage whose link I posted below.
Even though I spent quite some time searching through their code, I couldn't find how/where exactly they included the font. I can see it being used in their CSS file (font: Slim-Joe), but I don't see where it's included in their html.
Could someone help me with including this font in my html? I understand what to do/how it looks like when I'm browsing through fonts that Google is offering (since they make it pretty easy to include in my HTML), but I can't do anything about this specific font.
The webpage where it's included:
http://presentation.creative-tim.com/ (where it says "creative tim")
How the font looks like:
https://befonts.com/big-john-slim-joe-font.html
You can include fonts into your website by css #font-face rule.
This requires having either the otf or ttf font file on your server.
To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.
Declare it like
#font-face {
font-family: john-slim-joe;
src: url(myFontsFolder/john-slim-joe.ttf);
}
Use it like
p{
font-family: john-slim-joe;
}
To add a font to your website:
Locate the CSS file.
Create or locate your fonts folder.
Use the CSS's #font-face property to add your font file via url. This is also where you will name your font. Here's an example to follow from W3School.com's CSS #font-face Rule
After that, you can use the "font-family" property.
Hope this helps!
The website you are referring (http://presentation.creative-tim.com/) has imported the font files from given directory. Take Look at the Html header and you will find the following line:
<link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />
On this file, you can see how they imported and declared Slim-Joe font.
#font-face {
font-family: 'Slim-Joe';
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?d7yf1v');
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?#iefixd7yf1v') format('embedded-opentype'),
url('../../fonts/Slim-Joe/Slim-Joe.woff?d7yf1v') format('woff'),
url('../../fonts/Slim-Joe/Slim-Joe.ttf?d7yf1v') format('truetype');
font-weight: normal;
font-style: normal;
}
And usage by the nav bar css:
.navbar .navbar-brand {
font-weight: 600;
margin: 5px 0px;
padding: 20px 15px;
font-size: 20px;
font-family: "Slim-Joe";
letter-spacing: 0;
}
Chrome 26.0.1410.64m on Windows 8 has problems rendering WebFonts. It is a known problem and a solution is to first serve the svg version of the font instead of the woff version. It fixes the anti-aliasing and makes font look pretty again.
The downside of this method is the weird rendering inside the element inside select inputs.
I added a jsfiddle to see it in action : http://jsfiddle.net/4mSpv/6/.
The CSS is as simple as it can be.
#font-face {
font-family: 'Montserrat';
src: url('https://raw.github.com/louh/website/master/fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
font-weight: 400;
font-style: normal;
}
select {
font-family: 'Montserrat', sans-serif;
}
I remove the local installation of a font and noticed an other windows 7 computer doing the same. Anyone knows what is going on with chrome? (IE, Firefox, Safari all render fine)
PS: Other browser fonts not included in JSFiddle to filter out the problem and each browser have their own quirks (not allowing font-size etc) but render the text fine
There is no way to solve this problem.
This is NOT a Regression issue and is existing from M24.
I submitted a bug report and it Weird character rendering in option menu
As automaticoo stated, it is a known issue with Chrome. However, you can workaround the issue with a technique mentioned in the selected answer for this post: Google Webfonts Render Choppy in Chrome on Windows.
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
font-family: Arial; /* standard font */
}
}
That way you can use whatever font you want for browsers that still work, and replace it with a generic HTML font for Chrome.
So, I was actually looking for an answer for this, and I stumbled upon this question. I noticed this bug still exists today ( I just met it, such a happy meeting... ). Now I only found 1 solution, which is placing the svg font last in the #font-face declaration (this also means including all other formats). The only problem is that, when you for exampling try fixing the font rendering (to make it all smooth and stuff) you'd actually put the svg first.
Here are some examples to demonstrate it
1: SVG font last, no crisp font, options are displayed right
#font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.eot');
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/OpenSans-Light-webfont.woff') format('woff'),
url('../font/OpenSans-Light-webfont.ttf') format('truetype'),
url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal; }
So as you can see, the options in the select box show just fine, but the font really isn't that crips, just look at "Register" (you might notice this better in comparison with my second example)
2: SVG font last, crisp font, stupid options in select
#font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.eot');
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'),
url('../font/OpenSans-Light-webfont.woff') format('woff'),
url('../font/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal; }
Now you will see that the font is a lot more crisp but the select is really stupid.
I suggest adding another font-face with the svg last just for select's. This will keep your fonts crisp throughout the website but display the options just fine.
If I add a font into my FTP for my website, when I am adding in my font, where do I put it in the FTP and how do I use the font with HTML or CSS ?
You can upload the font where ever you want it, you just need to link to the right location. Please see exmaple below for font faces in CSS.
#font-face{
font-family:'Your Font Name';
src:url(http://www.example.com/fonts/YourFont.otf);
}
I personally recommend use the Font Squirrel Fontface generator for that. You will get something like:
/* #Fontface */
#font-face {
font-family: 'Yourfont';
src: url('fonts/yourfont.eot');
src: url('fonts/yourfont.eot?#iefix') format('embedded-opentype'),
url('fonts/yourfont.woff') format('woff'),
url('fonts/yourfont.ttf') format('truetype'),
url('fonts/yourfont.svg#Yourfont') format('svg');
font-weight: normal;
font-style: normal;
}
Using this way you will get a valid option to IE, Chrome, Opera, Firefox and Safari. Later you can use this font like a normal font, using
div.heading { font-family: 'Yourfont', (othersifyouwant); }
I have tried numerous things, including clicking on ALL of the questions related to my question (there were tons!) and tried all of their "solutions" but none worked for me. I tried wrapping the .eot file in a conditional IE statement but that didn't work either. Somebody said that #font-face won't work in Firefox if your not hosting the file on your own server... Or something like that. Anyway, go here to see the comparison between all other browsers vs Firefox. Please don't bash! I really did try every solution Google and stackoverflow had to offer. (Keep in mind that this is a Tumblr theme, and all files/images must be hosted via Tumblr's uploader .)
Thanks in advance!
Also, here is the code I have been using:
<!--[if IE]>
<style>
#font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
}
</style>
<![endif]-->
<style>
#font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('S'),
local('S'),
url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')
format('truetype'),
url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')
format('svg');
url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}
</style>
I tried going to about:config in Firefox and toggling security.fileuri.strict_origin_policy to false but it didn't work. Plus I need a way so all users who view my theme or use it to be able to view the font as well, and that is set to true by default.
Edit:
Here is the solution:
Cross domain workaround
Firefox does not like cross domain embedding.
Earl, I hate to be one to tell you this but your problem isn't with your #font-face rule. At least it wasn't when I checked out your site. When you use CSS font-family you need to make sure there is a comma between each different font in your chosen stack.
Your h6 selector was:
h6 {font-size:36px; font-family: 'S' sans-serif;}
It should be:
h6 {font-size:36px; font-family: 'S', sans-serif;}
Give this a try and I think it will work out for your. Just make sure all of your font-family stacks have commas in between multiple fonts. Firefox is a bit more strict with parsing technically incorrect CSS; Firefox just ignores it. That appears to be why you are having a problem, not your #font-face.
I'm not completely convinced by your #font-face rule. Can you copy the following and see what (if any) difference it makes? Just to clean things up.
#font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('☺'),
url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')
format('truetype'),
url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')
format('svg');
url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}
That just cleans a couple of minor things up. I'd also suggest changing your font name to something other than "S"; "Zegoe Light", for example.
Ivo Wetzel is correct from your comments though, this may be an issue with the way Tumblr serves up media with unknown file extensions.
I've had a similar problem, it worked everywhere, but not in Firefox4 on a Mac. I declared the #font-face-Stuff inside another #media block (only loading fonts for non-mobile devices) - and that's what caused the error.
This didn't work:
#media sth... {
#font-face {
...
}
}
This did work:
#font-face {
..
}
#media sth... {
}