I have this CSS file for the free google font. The font and help was downloaded, but I am not able to use them as intended. How can I use them for displaying Bold or, Italic or, regular text?
my css: fonts.css
/* anonymous-pro-regular - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: normal;
font-weight: 400;
src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
url('../fonts/anonymous-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-italic - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: italic;
font-weight: 400;
src: local('Anonymous Pro Italic'), local('AnonymousPro-Italic'),
url('../fonts/anonymous-pro-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-700 - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: normal;
font-weight: 700;
src: local('Anonymous Pro Bold'), local('AnonymousPro-Bold'),
url('../fonts/anonymous-pro-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-700italic - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: italic;
font-weight: 700;
src: local('Anonymous Pro Bold Italic'), local('AnonymousPro-BoldItalic'),
url('../fonts/anonymous-pro-v11-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
.myFontNormal {
font-family: 'Anonymous Pro Regular';
}
.myFontBold {
font-family: 'Anonymous Pro Bold';
font-size: 15px;
}
When I try to use it in forms it does nothing. what am I missing?
e.g.:
<div id="main" class="myFontBold">
<p>Default Emb.1234567890.</p>
</div>
Use different font-family names in the #font-face rules to make it work - you have font-family: 'Anonymous Pro'; in all three! Add "Bold" and "Italic" to the second and third one.
Related
I have a question regarding the CervoNeue font.
For some reason when the font looks like this on a website (as you can see there are some letters that look weird, and this only happens if the screen size is over 1024px):
I tried the font locally and it looks like it should.
I tried declaring it in multiple ways:
a)
#font-face {
font-family: "CervoNeue-Light";
font-style: normal;
font-weight: 300;
src: url('../fonts/CervoNeueLightNeue.woff2') format('woff2'), url('../fonts/CervoNeueLightNeue.woff') format('woff');
}
#font-face {
font-family: "CervoNeue-Regular";
font-style: normal;
font-weight: 400;
src: url('../fonts/CervoNeueRegularNeue.woff2') format('woff2'), url('../fonts/CervoNeueRegularNeue.woff') format('woff');
}
b)
/* CervoNeue Light */
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueLightNeue.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueLightNeue.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueLightNeueItalic.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueLightNeueItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
/* CervoNeue Regular */
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueRegularNeue.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueRegularNeue.woff') format('woff');
font-weight: 400;
font-style: normal;
}
I also noticed something odd in the Network tab:
The preview of the font is weird, compared to how it should look. Locally, the preview is just not available.
The font-face declarations also seem to appear as they should inside the final css file.
Any help would be appreciated, thanks!
#font-face {
font-family: 'Gotham';
src: url('../../assets/fonts/GothamBook.ttf') format('truetype'),
url('../../assets/fonts/gothambook-webfont.woff') format('woff'),
url('../../assets/fonts/gothambook-webfont.woff2') format('woff2');
font-weight: 400;
}
#font-face {
font-family: 'Gotham';
src: url('../../assets/fonts/GothamBold.ttf') format('truetype'),
url('../../assets/fonts/gothambold-webfont.woff') format('woff'),
url('../../assets/fonts/gothambold-webfont.woff2') format('woff2');
font-weight: 700;
}
body {
font-size: 1.6rem;
font-family: 'Gotham', 'Arial', 'Helvetica', sans-serif;
}
See above css. This works fine on Chrome, Firefox and Edge. But in Safari the text sometimes simply doesn't show. So it doesn't even go to the fallback, it just doesn't show.
This seems to be especially the case when the text is dynamically inserted with JavaScript. I can see the text in the inspector but not in the viewport. It always shows up when using:
font-family: 'Helvetica', sans-serif;
Any ideas?
Perhaps your Safari version does not support the fonts, maybe you can change into another one.
E.g.:
font-family: "Georgia", "Times New Roman", //[...]
I am trying to create my first website and I am experimenting with fonts from fontsquirrel.
The only problem is that I can use only some of the fonts I have downloaded through the site.
I am having a great deal of a problem in particular in writing the CSS code correctly, when the font family includes more than one style.
Lets take for example the LM Mono 10 Regular and Special Elite for example:
My code for special elite is the following and it works great:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'),
url('specialelite.woff2') format('woff2'),
url('specialelite.woff') format('woff'),
url(' specialelite.ttf') format('truetype'),
url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
and
.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}
This format is easy to work with because the special elite font-family has only one style.
BUT.. When I am trying to adapt this format on a font-family that has more than one styles like for example the LM Mono 10 family, it simply does not work....
http://www.fontsquirrel.com/fonts/Latin-Modern-Mono
I do not know if the mistake is on the way I am referring to the font family, or if I write the urls wrong... Could you please provide an example of the code in a reply?
Let's say for "Latin Modern Mono Light 10 Regular". How will the font-weight and font-style properties change? I just don't get it...
When I download the resources at the link you provided, it shows each font style as a completely different font family.
This is the Italic version:
#font-face {
font-family: 'latin_modern_mono10_italic';
src: url('lmmono10-italic-webfont.eot');
src: url('lmmono10-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-italic-webfont.woff') format('woff'),
url('lmmono10-italic-webfont.ttf') format('truetype'),
url('lmmono10-italic-webfont.svg#latin_modern_mono10_italic') format('svg');
font-weight: normal;
font-style: normal;
}
This is the Regular version:
#font-face {
font-family: 'latin_modern_mono10_regular';
src: url('lmmono10-regular-webfont.eot');
src: url('lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-regular-webfont.woff') format('woff'),
url('lmmono10-regular-webfont.ttf') format('truetype'),
url('lmmono10-regular-webfont.svg#latin_modern_mono10_regular') format('svg');
font-weight: normal;
font-style: normal;
}
In order to use these fonts as-is, you will need to specify the appropriate font-family whenever you use them.
For example:
.fifth {
font-family: 'latin_modern_mono10_regular';
font-weight: normal;
...
}
or
.fifth {
font-family: 'latin_modern_mono10_italic';
font-weight: normal;
...
}
For Regular and Italic version:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'), url('specialelite.woff2') format('woff2'), url('specialelite.woff') format('woff'), url(' specialelite.ttf') format('truetype'), url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'specialelite';
src: url('specialelite_italic.eot');
src: url('specialelite_italic.eot?#iefix') format('embedded-opentype'), url('specialelite_italic.woff2') format('woff2'), url('specialelite_italic.woff') format('woff'), url(' specialelite_italic.ttf') format('truetype'), url(' specialelite_italic.svg# specialelite') format('svg');
font-weight: normal;
font-style: italic;
}
Now, you can use this for Regular: font-style: normal
.fifth {font-family: 'specialelite'; font-style: normal; font-size: 16px; color:black;}
OR this for Italic: font-style: italic
.fifth {font-family: 'specialelite'; font-style: italic; font-size: 16px; color:black;}
I am facing a problem of brandley handwritten font ,
its look perfect in safari but there is a problem in both the giant browser so called mozilla and chrome .
Here's the code .
#font-face {
font-family: "BradleyHandITCBold";
src: url(BradleyHandITCBold.ttf);
}
.newfont
{
font-family: 'BradleyHandITCBold';
}
Solutions:
There is only problem in mozilla and chrome because its modern browser and does not supports ttf font , so there is need to convert TTF to WOFF or WOFF2.
I converted it using TTF to WOFF Converter and its worked perfectly .
Here is the solved code .
#font-face {
font-family: 'BradleyHandITCBold';
src: url("css/BradleyHandITCBold.ttf") format('truetype');
src: url("css/BradleyHandITCBold.woff") format('woff');
}
.newfont
{ font-family: 'BradleyHandITCBold' !important;
font-size : 31px;
}
i am posting Here to help out other developer in future .
thanks for your comment #t.niese
also really nice is it to have different font-weights for your fonts:
#font-face {
font-family: "DIN";
src: url("/media/fonts/din-regular-webfont.eot");
src: local('?'), url("/media/fonts/din-regular-webfont.woff") format('woff'), url("/media/fonts/din-regular-webfont.ttf") format('truetype'), url("/media/fonts/din-regular-webfont.svg#webfontfLFgafto") format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "DIN";
src: url("/media/fonts/din-bold-webfont.eot");
src: local('?'), url("/media/fonts/din-bold-webfont.woff") format('woff'), url("/media/fonts/din-bold-webfont.ttf") format('truetype'), url("/media/fonts/din-bold-webfont.svg#webfontfLFgafto") format('svg');
font-weight: bold;
font-style: normal;
}
and use it like this:
.bold-text {
font-family: 'DIN', sans-serif;
font-weight: bold;
}
.regular-text {
font-family: 'DIN', sans-serif;
}
I am currently developing an ASP.MVC web project in Visual Studio 2013 and have come across a strange issue when rendering glyphs using font-face in Chrome (39.0.2171.99 m) and Opera (26.0.1656.60).
I am using the latest Web Essentials release and using its SCSS pre-compiler. I have a small mixin for building the Css for the font as below.
#mixin font-face($font-family, $file-path, $font-weight, $font-style) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
// Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.svg##{$font-family}') format('svg');
}
}
}
And calling the mixin in the SCSS file
#include font-face(Flat-UI-Icons, '../fonts/Flat-UI-Icons', 300, normal);
This gives me the following result in the css file
#font-face {
font-family: Flat-UI-Icons;
src: url('../fonts/Flat-UI-Icons.eot');
src: url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/Flat-UI-Icons.woff') format('woff'), url('../fonts/Flat-UI-Icons.ttf') format('truetype'), url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
font-weight: 300;
font-style: normal; }
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: Flat-UI-Icons;
src: url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg'); }
}
I am then loading the font-face glyph's with the below css
.glyph-button,.glyph-list,.glyph-textbox,.glyph-number {
display: inline-block;
font-family: 'Flat-UI-Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 35px;
}
.glyph-button:before {
content: "\e033";
}
.glyph-list:before {
content: "\e00c";
}
.glyph-textbox:before {
content: "\e019";
}
.glyph-number:before {
content: "\e031";
}
And finally adding the glyph class to my ASP.MVC view
<h3><span class="glyph-list"></span> Components</h3>
The problem I have is that the font glyph do not render in either Chrome or Opera but they do in IE11 and FirefoxDeveloper.
Chrome / Opera
IE / Firefox
Any idea what the issue is?
Really simple fix to the mixin in the end. Required a simple cleanup of a couple of paths Flat-UI-Icons.svg#Flat-UI-Icons to Flat-UI-Icons.svg and adding the font-style and font-weight attributes to the -webkit implementation.
#mixin font-face($font-family, $file-path, $font-weight, $font-style) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('eot'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
// Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.svg') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
}
}
Everything now renders as expected.