#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.
Related
I downloaded a font called Helio from envato, but I can't get the font into my local file (haven't tried live).
My code is
#font-face {
font-family: 'helios_roundedregular';
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
line-height: 1.4;
margin: 0;
padding: 0;
font-family: Helios Rounded;
font-weight: normal;
font-style: normal;
}
This is a picture to the file path:
I believe it's correct. The I have the root folder, the css folder, and the font folder which contain the font files. The img shows the css and font folders open
The file names differ from the font in your path.
change
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
to
src: url('../css/fonts/Helios Regular.woff') format('woff'),
url('../css/fonts/Helios Rounded.woff') format('woff');
Also, if your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') format('woff');
your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') forma
You seems to be using wrong name for Font-Family, try this name instead.
#font-face {
font-family: 'Helios Rounded';
}
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.
I've used font-face for my website. it shows properly on all browsers except chrome.
what should I do?
CSS:
#font-face {
font-family: "B Yekan";
src: url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.eot');
src: url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.eot?#iefix') format('embedded-opentype'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.svg#B Yekan') format('svg'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.woff') format('woff'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
font-family: "B Yekan","Open Sans";
font-size: 13px;
line-height: 21px;
color: #626262;
}
Check if you have access from your style path to font folder. Is The font folder in the same folder of your style sheet file? try with absolute paths.
regards
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'm integrating css to my JSF2 application and something isn't working with the fonts. This is how I try it:
The fonts are in WebContent/resources/fonts (on Eclipse.) In the same directory I have a stylesheet.css file, and I declare the font face like this:
#font-face {
font-family: 'TitilliumText22LRegular';
src: url('titilliumtext22lregular-webfont.eot');
src: url('titilliumtext22lregular-webfont.eot?#iefix') format('embedded-opentype'),
url('titilliumtext22lregular-webfont.woff') format('woff'),
url('titilliumtext22lregular-webfont.ttf') format('truetype'),
url('titilliumtext22lregular-webfont.svg#TitilliumText22LRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I connect to the stylesheet with this in the header.xhtml of my application:
<h:outputStylesheet library="fonts" name="stylesheet.css"/>
The css class element that tries to connect to this is in resources/css and is called style.css. The class itself:
.time {
font: 19px 'TitilliumText22LRegular';
text-transform: uppercase;
line-height: 1.8;
white-space: nowrap;
}
For all I can tell this should work. But it doesn't. What am I doing wrong?
Have you tried not using the shorthand font? Try just using font-family: 'TitilliumText22LRegular'; and see what happens?