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;
}
Related
I'm creating personal blog with next.js.
Currently i use google fonts to provide fonts for my blog. Everything works fine except initial content shift on load.
When I load my web it will shift when new font loads (not all fonts have same spacing, sizes, etc...). So my question is how to prevent this content shift?
I have seen many suggestions to add loading screen until everything loads, but I think that the best solution would be just to bundle everything to the html itself. NextJs automatically inlines styles for me with <style/> tags and next-images will inline small images with base64. So how do I automatically inline my fonts (I dont want to always change tons of #font-face declaration when I decide to change font)?
Currently i use:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
I would like NextJS to automatically convert it to something like this:
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
You can use this amazing project to get any google font with base64 inlined src.
embedded-google-fonts
just put your google font link here: https://amio.github.io/embedded-google-fonts/
for example, for Barlow font: https://fonts.googleapis.com/css2?family=Barlow:wght#400;600;800&display=swap
then you can copy the result and create a <your-font>.css file in the project.
In my webpage, using google web fonts is ok.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,300italic,400italic,600italic">
<div style="font-family: 'Source Code Pro';">My Text</div>
it's ok using like this. But I've server hosted .otf font and I want to use it on my webpage, I've tried using like
#font-face {
font-family: 'MyFontName';
src: url("https://www.mywebsitepage.com/fonts/MyHostedFont.otf") format("opentype");
}
<div style="font-family: 'MyFontName';">My Text</div>
But it doesn't work. The reason why use my font is I can't find my font in free google web fonts.
Regarding to your sample, I hope that not the case you are really using it. I mean you have separate .css file which includes the font-face declaration and you attach this file in the head of your document, or using it like a part of <style>...</style> construction better also in head of document. If yes, so you can try to not use .otf, but using .woff and .woff2 instead.
It's not proper way to use .otf for web fonts now. Currently, if you don't really need support old versions of IE (8 and lower) you can just load fonts in .woff and .woff2 formats and that will cover your needs.
Like this:
#font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
If you have .otf font you can really easy convert it to need web-font formats using some online generators like https://transfonter.org/ or similar.
Is there an easy way to display webpages in computer modern font?
The easiest and most stable way to do this I found was to base64 a font I found at http://mirrors.concertpass.com/tex-archive/fonts/cm-unicode/fonts/otf/. I used the cmunrm.otf from there, base64'ed it and put it as a font face in my css.
#font-face {
font-family: "my-font";
src: url(data:font/truetype;charset=utf-8;base64,T1R...gP5w/kP+RAA format("opentype");
}
body {
font-family: "my-font";
}
You can see an example at https://jsfiddle.net/jtvx9auo/
While you could also simply download the otf file and put it to your server, I found base64ing to be more reliable, e.g. when trying to convert to pdf using wkhtmltopdf.
In case anyone still stumbles upon this (2020+) looking for the optimised web fonts rather than the larger .otf fonts which are used in the answer above, I've hosted the Computer Modern font family via the jsDelivr CDN.
To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:
https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css
And then just add the Computer Modern Serif or sans-serif families directly in your css files.
Example Code:
<head>
<!-- Other imports... -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css">
<style>
body {
font-family: "Computer Modern Serif", serif;
}
</style>
</head>
Check out the full documentation here
I'm currently making a webpage that imports the needed fonts from Google Fonts this way:
#import url(http://fonts.googleapis.com/css?family=Italianno);
The problem is that every time I load the page I need to be connected to the Internet and it also takes time to load the font. Is there any way I can load the font offline because while testing the page I'll be refreshing it countless number of times and I might not be connected to the internet all the time and I don't want to wait for 3-5 seconds every time for the font to be loaded.
I tried installing the font in the system and then using it in the CSS. It didn't work.
Hey make a fonts folder with css folder and put the desired font there. Then in CSS call this code as example for MeriyoUI font as mentioned below. This would load the font onto your app.
For this you just need to download the font and put that in fonts folder. (pre-requisite).Try using web safe fonts.
Hope it helps.
CSS
#font-face
{
font-family: 'Meiryo UI';
font-weight: normal;
font-style: normal;
src: url('../fonts/MeiryoUI.ttf');
}
1. create a folder in website directory and move your fonts
to it! ( .ttf , .eot , .woff )
example: directory --> webfonts
2. create a css document for that!
example: directory --> css --> webfont.css
3. use this code into webfonts.css
#font-face {
font-family: 'name';
font-style: normal;
font-weight: 400;
src: url('../webfonts/fontname.eot');
src: url('../webfonts/fontname.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fontname.woff2') format('woff2'),
url('../webfonts/fontname.woff') format('woff'),
url('../webfonts/fontname.ttf') format('truetype');
}
4. and in the first line of haed element into your webpage, use bellow code:
<link rel="stylesheet" href="css/webfonts.css" type="text/css"/>
Use CSS3 #font-face. Try making font face of your fonts from any fontface generator like this http://www.fontsquirrel.com/tools/webfont-generator. And to learn how to use them take a look in here http://css-tricks.com/snippets/css/using-font-face/
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)