In a project I'm trying to import the font 'Encode Sans', this seems to work on localhost, but when build, font is not working.
I have a global stylesheet with the following:
#import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght#400;600;700;800&display=swap');
body {
font-family: 'Encode Sans', sans-serif;
background: $backgroundColor;
}
I've tried to import throught creating a public/index.html file with <link>, but that did not solve it either and I would prefer to not have to font locally.
To make my question more clear, this is the result:
Build:
Localhost:
Eventually I went with downloading the font and adding it to the project, replacing the #import with #font-face for desired changes. This solved my issues
Related
I am creating some text in html and I've tried using #fontface, which of course work.
The problem is how could I import fonts from my ftp server. I don't really get what path or something like this should be in url in #fontface
The simplest way is to add your fonts somewhere in the path of your web server (where html pages are located) so your font-face will be something like:
#font-face {
font-family: "Open Sans";
src: url("/path/to/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/path/to/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
Having this problem with SCSS and google fonts.
When I compile my SCSS files into main.css I see that the font-family is there -
However, when I go to run my local server the font doesn't load and is not included in the main.css file -
Not sure what is going on as I have included the google font links in my index file,
and did an import in my main scss file.
Any ideas of why the font-family is on the main.css file but is ignored when the server loads it?
I usually include fonts as imports in scss partial:
#import url("https://fonts.googleapis.com/css?family=Nunito+Sans:wght#300;400;600;700");
then in my vars.scss I will define a variable something like this:
$font-default: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, -apple-system;
I have a CSS file that attempts to import Open Sans. I'm using ttf fonts downloaded from Google Fonts. I can't seem to get the font to work. It's still displaying the regular Times font.
fonts.css
#font-face {
font-family: "Open Sans";
src: url("fonts/OpenSans-Regular.ttf") format("ttf");
}
app.css
body {
font-family: "Open Sans";
}
index.html
<link rel="stylesheet" href="dist/fonts.css" />
<link rel="stylesheet" href="dist/app.css" />
My directory structure is like so:
/app
- dist
- fonts
app.css
app.js
fonts.css
index.html
I've used Chrome's inspector to check if the font file is being pulled in, but it isn't. There's also no error. If I include the css file directly from Google then it works. I also notice that Google serves a different font format that isn't ttf.
Note that I am developing a desktop application using Electron. Electron is powered by Chrome. My application is intended to run offline, hence why I am not linking directly to Google.
Any idea what's going on?
The following worked:
#font-face {
font-family: "Open Sans";
src: url(fonts/OpenSans-Regular.ttf) format("truetype");
}
The following code worked for me. Using JavaScript to load the font
let openSans= new FontFace('Open Sans', 'url(./fonts/mem8YaGs126MiZpBA-UFUZ0bbck.woff2)');
openSans.load().then(function(loaded_face) {
document.fonts.add(loaded_face);
document.body.style.fontFamily = '"Open Sans", Arial';
}).catch(function(error) {
// error occurred
console.error(error);
});
If you want to use google fonts you don't need to upload fonts files into your website folder, just add this url to your file html (
)
and use font family in css : font-family: 'Open Sans', sans-serif;
The html+css for Firefox in windows, looks fine, but same looks out of place in Firefox in Ubuntu. Please do let me know, as to how it can corrected, what should i do?
More info 1: The css code for the text in the attached image:
style="font-family:'Museo 300';
font-size:11px;
text-align:left;
color:#636466;
padding-top:3px;"
Although am changing Museo 300 to font to Arial, Helvetica, sans-serif, so it can load in any browser with these default fonts, but still i see the this problem.
image attached
Most likely the font you are using is not installed on the Ubuntu machine. To get around this you must supply the font yourself. Google Fonts is a great way to do just this.
You can search their site for a suitable font, and then link it in your site <head>.
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
And then use it in your CSS
font-family: 'Roboto', sans-serif;
Sadly, Google Fonts does not have the Museo font you are trying to use. However, you can use the #font-face CSS At-Rule to link to a font file which you are hosting on your site. Make sure that you only host the languages and font weight/style that you plan to use, and that your font file is limited to those same parameters. This will allow the file to be loaded much faster.
#font-face {
font-family: 'My Custom Font';
src: url('http://yoursite.com/yourfontfile.ttf') format('truetype');
}
p.customfont {
font-family: 'My Custom Font', Verdana, Tahoma;
}
(See this answer for more information)
I am in a Rails project and I am using two fonts which are in the /assets/fonts folder.
#font-face {
font-family: FuturaStd-Light;
src: url("/assets/fonts/FuturaStd-Light.otf");
}
#font-face {
font-family: HelveticaNeue;
src: url("/assets/fonts//HelveticaNeue.dfont");
}
The fonts are very big files (especially the second one) and it is taking forever to load them. And in every page the text appears after everything else.
Is there a better way to load the fonts? Is there a way to cache them? Any ideas?
#font-face is a wonderful technique, but large font files will definitely slow down your site. There are many techniques you can use to combat this:
use a font-hosting service like google fonts or typekit
host your font files on a CDN
optimize your font files using a service like fontsquirrel
One thing in particular to watch out for is that IE will block the rendering of the entire page if there's a SCRIPT element before your stylesheet. So make sure that all your stylesheet links are above any javascript files you're loading.
Further reading:
Web Font Performance: Weighing #font-face Options and Alternatives
#font-face and performance
fighting the FOUT
I agree with Scott, #font-face may slow down your site and so depending on your goals you may want to go with google fonts, typekit, or another online font provider. For a project I'm currently working on I chose google fonts. All you have to do is add the snippet google web fonts to your to your applications.html.erb:
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
And then add it to your css file:
h1 {
font-family: "PT Sans", Arial, Helvetica, sans-serif;
}