I am beginner in a coding world and asking the first question in here, hope I will explain myself correctly!
I have uploaded Proxima Nova Regular and Open Sans Light via font face and included below styling in my css file. Both fonts work, but not the way they should be. Proxima Nova renders with much more weight on, in comparison to the one installed on my computer. Also both fonts don't pick up html bolding feature? to make text bold I need to specify font weight in css file, there is no other way? Not sure what the problem is. I have tried to find a solution but couldn't find any. Maybe it is something really basic that I haven't been able to grasp yet during my learning journey.
I have downloaded fonts with the Font Squirrel.
Fonts are based in a separate assets folder to my css file.
I have tried to clear my font cache multiple times and it didn't help.
I am working with Chrome however have the same issue with other browsers: Mozilla and IE.
This is a font I am after and I had it working on my pc, having proxima nova and open sans installed locally: https://www.katietreggiden.com/about
this is what i get via font face and web server: https://youmedigital.com/
Thank you for your help in advance:-)
#font-face {
font-family: "Proxima Nova";
src: local("Proxima Nova");
src: url("assets/fonts/Proxima Nova.woff") format("woff"),
url("assets/fonts/Proxima Nova.woff2") format("woff2"),
url("assets/fonts/Proxima Nova.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: "Open Sans";
src: local("Open Sans");
src: url("assets/fonts/Open Sans Light.woff") format("woff"),
url("assets/fonts/Open Sans Light.woff2") format("woff2"),
url("assets/fonts/Open Sans Light.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
body {
font-family: "Proxima Nova";
font-weight: 300;
color: #575757;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans";
font-weight: 300;
color: #000000;
}
Related
So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.
Let's say I have the following font face definitions:
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: url("../fonts/open-sans.regular.woff") format("woff");
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans.light.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('../fonts/open-sans.semibold.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/open-sans.bold.woff') format('woff');
}
In Chrome's dev tools, I can tell which font family is being used:
But is there a way to tell which specific font file is being used? I'm trying to verify that the browser is actually using the bold version of the font, for example, instead of doing its own 'fake' bolding on the regular version of the font.
To answer my own question, Nikul Khatik gave the correct answer. Chrome dev tools doesn't support this feature, but Firefox's does:
So use Firefox to get the actual font face that's used for an element.
In Chrome there is no way to know which font file is loaded but you can get good hints by check out the "Rendered Fonts" in "Computed" tab and then check font files name in "Application" tab
check Rendered Fonts:
check font files name:
Open Chrome DevTools (Right click > Inspect)
Go to Sources tab
Look for the font folder (if you're using Google Font, go to ☁fonts.gstatic.com)
Open subdirectories if any, you'll get the actual font file being
used
In Safari, in Resources it will tell. you the specific font files that are loaded.
Fonts
fontfileBold.ttf
Some of the designers working at my workplace noticed that on Safari the font of our website appeared to be the one installed on their machine and not the one we are serving.
We noticed it in two different occasions and with two different fonts: Montserrat and Open Sans.
The first time (with Montserrat) the user had a newer version of the font, and she saw the newest only on Safari, because she had installed it on her local machine (this wasn't happening on Chrome).
The second time (with Open Sans) we saw a bolder font only on a particular machine: we then discovered that on that machine the user had installed a bolder weight (700) than the one we were serving (600). And the rule was
font-weight: bold;
so I suppose that the browser picked up the boldest (700) from the installed fonts.
I did some research but didn't find any evidence of this. Does anyone know if there is any evidence/documentation on Safari giving precedence to installed fonts instead of the ones you are serving?
We are not using Google Fonts from Google's CDN, as we decided to download them and serve them from our own server.
EDIT: I'm adding the code we use to load the font (generated using Google Webfonts Helper):
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url("font/opensans/open-sans-latin_cyrillic-400.eot");
src: local("Open Sans"), local("OpenSans"), url("font/opensans/open-sans-latin_cyrillic-400.eot?#iefix") format("embedded-opentype"), url("font/opensans/open-sans-latin_cyrillic-400.woff2") format("woff2"), url("font/opensans/open-sans-latin_cyrillic-400.woff") format("woff"), url("font/opensans/open-sans-latin_cyrillic-400.ttf") format("truetype"), url("font/opensans/open-sans-latin_cyrillic-400.svg#OpenSans") format("svg");
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url("font/opensans/open-sans-latin_cyrillic-600.eot");
src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("font/opensans/open-sans-latin_cyrillic-600.eot?#iefix") format("embedded-opentype"), url("font/opensans/open-sans-latin_cyrillic-600.woff2") format("woff2"), url("font/opensans/open-sans-latin_cyrillic-600.woff") format("woff"), url("font/opensans/open-sans-latin_cyrillic-600.ttf") format("truetype"), url("font/opensans/open-sans-latin_cyrillic-600.svg#OpenSans") format("svg");
}
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url("font/montserrat/montserrat-latin-regular.eot");
src: local("Montserrat-Regular"), url("font/montserrat/montserrat-latin-regular.eot?#iefix") format("embedded-opentype"), url("font/montserrat/montserrat-latin-regular.woff2") format("woff2"), url("font/montserrat/montserrat-latin-regular.woff") format("woff"), url("font/montserrat/montserrat-latin-regular.ttf") format("truetype"), url("font/montserrat/montserrat-latin-regular.svg#Montserrat") format("svg");
}
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url("font/montserrat/montserrat-latin-700.eot");
src: local("Montserrat-Bold"), url("font/montserrat/montserrat-latin-700.eot?#iefix") format("embedded-opentype"), url("font/montserrat/montserrat-latin-700.woff2") format("woff2"), url("font/montserrat/montserrat-latin-700.woff") format("woff"), url("font/montserrat/montserrat-latin-700.ttf") format("truetype"), url("font/montserrat/montserrat-latin-700.svg#Montserrat") format("svg");
}
And the relevant code to give a different font-face to different parts of the pages.
body{
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
}
h6, h5, h4, h3, h2, h1{
font-family: inherit; // inheriting from body
font-weight: bold;
}
.view{
font-family: 'Montserrat', sans-serif;
}
Based on the code you show the solution is kind of obvious: if you don't want local fonts to interfere, don't tell the browser to try local() first. Or at all, really.
It's 2017, and in today's browser landscape you only want src: url(woff font version) format("woff"), nothing else: no other formats, no local-first, just explicitly the font your content should use. In the current browser landscape eot and svg don't even exist as valid formats anymore, and woff are ttf/otf, but with compression, and marked explicitly as intended "for the web" so that some normally required data can be left off, yielding an even smaller font payload. The only other format you might add is WOFF2, which uses a newer compression algorithm and allows "slicing" up a single font into several subsets so that the browser only loads the slices it needs to style your content instead of an entire font in one go.
Whatever generated this CSS for you appears to still be stuck in "how webfonts worked in 2012".
Eventually I used what #Mike'Pomax'Kamermans suggested in one of the last comments to his own answer, I'm posting it here just for clarity.
We removed every local specification and every src apart from the .eot file and the .woff2 file.
Then we added this declaration to tell Safari that our bold font should render with the 600 weight, otherwise Safari would look into the installed copy of the font (which included the 700 weight).
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: bold;
src: url('font/open-sans-latin_cyrillic_latin-ext-600.eot'); /* IE9 Compat Modes */
src: url('font/open-sans-latin_cyrillic_latin-ext-600.woff2') format('woff2'); /* Super Modern Browsers */
}
I would like to know If we can upload any font on our website ??
Where can I download a font or google font and upload it on my css file directly like that :
#font-face { font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: 300;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); }
instead of use this sort of code :
#import url(http://fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900);
thank you
See don’t use #import.
Prefere LINK tag :
<link rel='stylesheet' href='a.css'>
Download Source Sans Pro webfont and make CSS file with these rules :
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Regular.otf');
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Bold.otf');
font-weight: bold;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Italic.otf');
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-BoldItalic.otf');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Light.otf');
font-weight: 300;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-LightItalic.otf');
font-style: italic;
font-weight: 300;
}
Using a Custom Web Font
I found this youtube video online. It gives the instructions step by step.
https://www.youtube.com/watch?v=KPwG67lEFdc
I listed the steps here go to http://www.google.com/fonts/
find a font that you like, click the quick use link. Scroll down again and copy the link that looks like the following.
http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Next integrate the fonts into your CSS. The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Open Sans', sans-serif;
True, like #Jukka said, some fonts aren't free, so you'll have to search. Luck is that:
Raleway - http://www.fontsquirrel.com/fonts/raleway
and Open Sans - http://www.fontsquirrel.com/fonts/open-sans
are free, so you just have to download the TTF (big blue button), inside the zip there's the whole set of weights and styles of the font.
Then you have two options:
Upload the .ttf directly to your ftp and call it into your css, as you stated; or
Use the Webfont Generator (http://www.fontsquirrel.com/tools/webfont-generator) to create another types (.woof, .eot, .svg), because of browsers.
FYI, Chrome in the last few versions (< 39) had a problem with some fonts, and just the .svg extension corrected the bug.
I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using #font-face?
I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.
The css for the style sheet fonts is:
#font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue-webfont.woff') format('woff'),
url('../fonts/bebasneue-webfont.ttf') format('truetype'),
url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
font-weight: normal;
font-style: normal;
The other styles sheets for layout, etc call the font like this:
}
#merchandise h1 {
font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
font-size: 33px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
Anything obvious? Of course, it works locally on my machine because I have the font installed.
In #merchandise h1, font-family: "Bebas Neue" needs to be font-family: "BebasNeueRegular"
or
In #font-face, font-family: 'BebasNeueRegular' needs to be font-family: 'Bebas Neue'