My CSS includes custom fonts such as:
#font-face {
font-family: 'AllerRegular';
src: url("http://domain/css/fonts/aller_rg-webfont.eot");
src: url('http://domain/css/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'), url('http://domain/css/fonts/aller_rg-webfont.woff') format('woff'), url('http://domain/css/fonts/aller_rg-webfont.ttf') format('truetype'), url('http://domain/css/fonts/aller_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
height: 100%;
font-family: AllerRegular, sans-serif;
font-size: 12px;
color: #000000;
}
When loading the web page, several of the paragraphs sometimes seem to be "missing". In the Inspector, I then look at the body, uncheck the line that says font-family: AllerRegular, sans-serif;, then check it again. The text comes back!
Because of this test, I am assuming there is some issue in the order that the CSS and the fonts file are loaded.
Also note that the CSS file and the font files are not hosted on the same server.
Related
I cannot get my #font-face to work. It registers when I inspect element, but it only triggers the backup serif font. This is how I have it set up:
#font-face {
font-family: 'Wremena';
src: url('./fonts/Wremena Light.woff') format('woff'),
url('./fonts/Wremena Light.woff2') format('woff2'),
url('./fonts/Wremena Light.ttf') format('truetype'),
url('./fonts/Wremena Light.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
and how its used:
.name {
font-family: 'Wremena', serif;
font-weight: lighter;
font-size: 2em;
line-height: 1em;
}
The site link is here:
www.koreatownmovie.com
Don't use all those formats. Start by just using woff/woff2. Then, remember that #font-face is you telling the CSS engine what it needs to do when it seens font-... instructions. In this case, you told it to load the font from the URL(s) you gave only when it sees font-weight: normal and font-style: normal, but then in your page CSS you use "font-weight: lighter". Since you didn't tell the CSS engine what to do when it sees that font-weight, it will not use that custom font: you didn't tell it to.
If you want it to use your font irrespective of a particular font-... property, don't add that property
#font-face {
font-family: Wremena;
src: url('./fonts/Wremena Light.woff') format('woff'),
url('./fonts/Wremena Light.woff2') format('woff2');
}
Done. This font should now get used irrespective of font-style, or font-weight, etc.
#font-face {
font-family: 'Snell Roundhand Script';
src: url('../fonts/snell-roundhand-script.eot');
src: url('../fonts/snell-roundhand-script.eot?#iefix') format('embedded-opentype'), url('../fonts/snell-roundhand-script.woff') format('woff'), url('../fonts/snell-roundhand-script.ttf') format('truetype'), url('../fonts/snell-roundhand-script.svg#Snell Roundhand Script') format('svg');
}
#font-face {
font-family: 'Baskerville Old Face';
src: url('../fonts/ufonts.com_baskerville-old-face.eot');
src: url('../fonts/ufonts.com_baskerville-old-face.eot?#iefix') format('embedded-opentype'), url('../fonts/ufonts.com_baskerville-old-face.woff') format('woff'), url('../fonts/ufonts.com_baskerville-old-face.ttf') format('truetype'), url('../fonts/ufonts.com_baskerville-old-face.svg#Baskerville Old Face') format('svg');
}
The above code is the font-face code
And below i am poting the css i have added:
.big-red-text{
color: #ff0000;
font-family: Snell Roundhand Script;
font-size: 50px;
text-align: center;
}
.big-orange-text{
color: #ff6600;
text-align: center;
font-weight: 600;
font-family: Baskerville Old Face;
}
Is there something missing in this? For it not to take the font into consideration? All the fonts are stored in the font folder in the root directory.
If your font name contains spaces, you have to enclosure it in single quotes.
Without spaces in the name you can lose the single quotes but I suggest to always use them to avoid mistakes.
So as Fundhor suggests it will work with
font-family: 'Snell Roundhand Script';
and
font-family: 'Baskerville Old Face';
Make sure your files are in the right place:
- css
-- fonts.css <-- here you are declaring your #font-face
- fonts
-- snell-roundhand-script.eot
-- etc...
Additionally include your fonts.css before you are using the font-family
Try with this :
.big-red-text{
color: #ff0000;
font-family: 'Snell Roundhand Script';
font-size: 50px;
text-align: center;
}
Did you purchase the font or font-family?
Url:https://www.fonts.com/font/linotype/snell-roundhand
The support team at fonts.com should be able to resolve your issue.
I have a simple one-page layout, all HTML + CSS basically(will add some js soon but it's not there at the moment).
Baiscally i have this:
/* Cambo */
#font-face {
font-family: 'CamboRegular';
src: url('font/cambo/Cambo-Regular-webfont.eot');
src: url('font/cambo/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/cambo/Cambo-Regular-webfont.woff') format('woff'),
url('font/cambo/Cambo-Regular-webfont.ttf') format('truetype'),
url('font/cambo/Cambo-Regular-webfont.svg#CamboRegular') format('svg');
font-weight: normal;
font-style: normal; }
/* Source Sans Pro */
#font-face {
font-family: 'SourceSansProRegular';
src: url('font/sourcesanspro/SourceSansPro-Regular-webfont.eot');
src: url('font/sourcesanspro/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.woff') format('woff'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.ttf') format('truetype'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg');
font-weight: normal;
font-style: normal; }
When i use font-family: 'Cambo Regular'; it works, but when i try to choose a font-family: 'SourceSansProRegular'; the font is not being loaded on any browser i try.
The original path for the fonts in the website folders was url('../assets/fonts/ --> rest copied from FontSquirrel
Since i noticed none of the two worked i moved them inside the folder where the css are so i have
main folder(with index pointing at the css folder)/assets/css(with my css)/font(with the two fonts folders inside)
Why is this not working? Am i missing something while declaring the path? If CamboRegular shouldn't work too but it's displaying just fine both on Windows and Mac on any browser.
QUICK EDIT!
I changed the path to a totally wrong one and it displays the basic page font.
I think the font is being loaded but it looks "bolder" than it should be. If you watch the design in Photoshop and then on the page it looks different(i made the design so i know it wasn't stretched or something) but CamboRegular is still looking and acting as it should.
Here's the image to show the problem
http://img526.imageshack.us/img526/2671/nnqu.jpg
The CSS for the the grey text is included in is pretty simple too
p {
color: #8a8a8a;
font-family: 'SourceSansProRegular';
font-size: 16px; }
And here's the one for the top menu(not shown in this image) with the CamboRegular correctly working
h1 {
color: #494949;
font-family: 'CamboRegular';
font-size: 48px;
text-align: center; }
As you can see it's nothing fancy but still, one's working the other isn't.
I have a problem when I choose a font in a CSS file. The font doesn't appear correctly in local HTML code.
#main_menu ul li
{
border-left:1px solid #dad8d8;
font-family:"arabic transparent";
font-size:16px;
padding: 0px 20px;
color: #e2001a;
list-style: none;
display: inline;
font-weight: bold;
}
The font in the HTML file isn't like in the Photoshop design.
You better use #font-face from CSS3. Example from W3School:
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
You have to embbed the font
Use the following website for font generation
www.fontsquirrel.com/fontface/generator
#font-face {
font-family: 'YourFont';
src: url('YourFont.eot');
src: url('YourFont.eot?#iefix') format('embedded-opentype'),
url('YourFont.woff') format('woff'),
url('YourFont.ttf') format('truetype'),
url('YourFont.svg#YourFont') format('svg');
font-weight: normal;
font-style: normal;
}
You cannot just use any font on the web/in HTML. You have something called web-safe fonts and can add custom ones manual.
Check FontSquirrel for conversion techniques: http://www.fontsquirrel.com
If a font is on your local machine, it "can" work if the browser tries to look for it, but you can't rely on it as most other users that visit your website won't have it on theirs, making the font fallback to Arial or an alike default font.
Font-squirrel will give you these formats (name is an example);
arabic.eot
arabic.svg
arabic.ttf
arabic.woff
With all these included all major browsers should be able to read your custom font with the #font-face property:
#font-face {
font-family: 'arabic transparent';
src: url('arabic.eot');
src: url('arabic.eot?#iefix') format('embedded-opentype'),
url('arabic.woff') format('woff'),
url('arabic.ttf') format('truetype'),
url('arabic.svg#arabic_transparent') format('svg');
font-weight: normal;
font-style: normal;
}
#main_menu ul li {
font-family: 'arabic transparent';
}
I don't understand how to get this to work, any help would be appreciated;
I'm going off of what I got from this website: http://alistapart.com/article/cssatten
from my style.css
#font-face {
font-family: "JSL";
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Neither is the plus sign the issue (tested with my renamed fonts), nor do you have to import a separate css file at the top of your main css file.
However, you may need to have more versions of your font than just the true type. Have a look at Bulletproof #font-face Syntax.
You may use FontSquirrel’s generator to achieve this.
Here is an example of a #font-face embed in my application, which is pinned right at the top of my main css stylesheet.
#font-face {
font-family: 'JustVector';
src: url('../fonts/justvectorv2+webfont.eot');
src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
url('../fonts/justvectorv2+webfont.woff') format('woff'),
url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
font-weight: normal;
font-style: normal;
}
no
#font-face
Try get inport it:
#import_your_new_cssfile.css
whre you put:
font-face {
font-family: "JSL";
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Is perhaps the "+" sign in the font URL a problem? You might want to URL encode it.
Edit - after hitting the font URL, it looks like you should try to download the ttf file, and refer to it locally, rather than from a remote source. It's prompting me for a Captcha in order to download the file, which is probably why it's not working.
You do need to download the file and refer to it locally,
The link supported there is a download link and requires a Captcha to be downloaded which means it is NOT a direct link to the TTF File.
Depending on the Font you may need to use:
#font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'),
url('path/to/font/someFont.woff'), format('woff'),
url('path/to/font/someFont.ttf'), format('truetype'),
url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}
and in CSS:
BODY
{
font-family: 'someFont', Fallback, sans-serif;
font-size: 12px;
...
}
This worked for me when I had issues wityh embedding a custom font.