Is it possible to load an external font via inline CSS?
Note: I'm not talking about using an external CSS file with a @font-face definition, but rather something like the following:
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
Is it possible loading an external font with inline css? NOT with an external CSS file [....].
Yes, you can base64 encode a font or fonts as shown in this article from Stephen Scaff and drop them into a style block in your page to avoid the external request.
It may also be possible to use this technique in the way you describe if the browser you're using supports it.
<style>
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: normal;
src: local('PT Sans'), local('PTSans-Regular'),
url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
}
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: normal;
src: local('PT Serif'), local('PTSerif-Regular'),
url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
}
</style>
Every modern browser supports WOFF2, so you should probably use that and only that for the foreseeable future. Also, this technique will improve your page speed scores, but will degrade performance overall (even for first page loads), unless you're only base64-encoding critical page assets (e.g. glyphs of the font shown above the fold) and asynchronously load the rest.
Performance-wise your best bet right now is to use Brotli compression and pipe the webfont stylesheet down with HTTP/2 Server Push.
<h1 style="...">
<style> tag anywhere, or just in the header?
You cannot include a @font-face rule in a style attribute (which is “inline CSS” in the most narrow sense). By the HTML 4.01 specification, you cannot include such a rule inside the body element at all (“inline CSS” in a broader sense, which includes style elements). But in practice it is possible.
In practice, if you include a style element inside body, it will be processed by browsers just as if it were in the syntactically correct place, i.e. inside the head element. It even works “backwards”, effecting elements appearing before it.
You can even make this approach – which should be used only if you cannot change the head – formally correct as per HTML5 CR. It allows a style element at the start of any element with flow content as its content model. Current browsers ignore the scoped attribute.
Update: the following is not relevant any more, since the validator bug has been fixed.
However, there is a bug in the W3C Markup Validator and in validator.nu: they disallow style at the start of body. To overcome this bug, and to make your document validate in addition to being valid, you can use an extra div element:
<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
style elements, which can be called “inline CSS” in the broader sense that CSS code directly appears in an HTML document, instead of being in a separate CSS document that is just referred to in HTML. The HTML 4.01 rule that disallowed style inside body has no single location in the spec, since it follows from the absence of the style element from any content model except that of the head element.<style scoped></style> and<style></style> is striped from the web sanitizer, but I can put anything inside astyle="" attribute. Also, would it work if I use a@importinside a style attribute?@import does not work inside a style attribute. The style attribute value can only consist of declarations (name: value), which will be applied to the current element.
No, not that I know of. You will need to declare this kinds of things on a <style> block or an external CSS file.
Though if you want something like this, it's very probable you're doing it wrong.
Though if you want something like this, it's very probable you're doing it wrong.: What about embedding a font on a single mediawiki page?
There is an easier way if you're using NExt.js.
import localFont from "next/font/local";
const myFont = localFont({ src: "./my-font.ttf" });
fontFamily: `${myFont.style.fontFamily}`,
This should work very easily without hassle.
@font-face {
font-family: myFirstFont;
src: url(Tajawal-Medium.ttf);
}
* {
font-family: myFirstFont;
}
/*
You can include this code inside HTML code or in an external file as is the case here.
Note: The font used in this code must be uploaded to your website where the pages are located, with the path changed to the location of the CSS file.
Modern browsers support !
by Mufarrij Almutairi KSA Majmaah City .
*/<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(Tajawal-Medium.ttf);
font-weight: bold; /*Optional*/
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.</div>
</body>
</html>
<!--
You can include this code in an external file and import it into an HTML file by:
<link rel="stylesheet" href="cssFile.css">
Or include it inside an HTML file, as shown here.
Note: Modern browsers support !
by Mufarrij Almutairi KSA Majmaah City .
-->
If you use @font-face, you should be able to do something like this:
CSS
@font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/raleway_thin-webfont.woff') format('woff'),
url('fonts/raleway_thin-webfont.ttf') format('truetype'),
url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;
}
Make sure to include the fonts - the above example has placed all of the fonts in a relative-path directory to the css file.
HTML
<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">
You should be able to find free web-based @font-face fonts here.
style= attribute ;)