HTML pre-load font and use it in css - html

I'm aware that all of you know, if we do this in our .css file:
#font-face {
font-family: "Akrobat-Regular";
src: url('/assets/Akrobat-Regular.otf') format("truetype");
}
body {
color: #1c1c1c;
font-family: "Akrobat-Regular" !important;
}
Browser will do additional request to download font, and as a result there will be a short amount of time when default font will be used and then they will be substituted with new downloaded.
I found this way to preload font, but really don't know how top use downloaded font without additional request (don't worry, ti as slim syntax):
link rel='preload' href='/assets/Akrobat-Regular.otf' as='font' type='font/otf'
= stylesheet_link_tag 'application'
css:
#font-face {
font-family: "Akrobat-Regular";
src: url('/assets/Akrobat-Regular.otf') format("truetype");
}
body {
color: #1c1c1c;
font-family: "Akrobat-Regular" !important;
}

You can use the pre loaded fonts without creating a font-face as well.
<link rel="preload" href="your_font_file" as="font" type="font/woff" crossorigin="anonymous">
Just mention the font family to use it:
font-family: "your_font";
This way you don't need to put an additional request, as you have already loaded the font in your document.
Check the below example:
div.rob {
font-family: "Roboto";
font-size: 20px;
}
<link rel="preload" href="https://github.com/FontFaceKit/roboto/blob/gh-pages/fonts/Regular/Roboto-Regular.woff" as="font" type="font/woff" crossorigin="anonymous">
<div class="rob">
Hola in roboto
</div>
<div>
Normal font
</div>

Related

What's wrong with my CSS font-face linkage and usage

EDIT: So, for some reason, when setting font in "body" or "html" it didn't applied font to elements in "form", because I had only form element to test form elements, fonts didn't worked. When I just added some random text before "form" element by rolling my head on my keyboard, I found out that fonts are actually working... But I was expecting that if I set font-family rule in "body" or "html" every element will inherit that font... No CSS with "#font-face" rule needed editing...
So I have a problem with self-hosted font. I want to load Unscii font on my page, I've generated CSS file with #font-face rule and fonts (WOFF, WOFF2, TTF), linked that CSS file to my page, but when I'm trying to use this font in other CSS file, it doesn't work. Also when I trying to use other font, sizing of elements on page changes slightly, like "margins or paddings or content box", but the font face itself is still remains the same, even for "built-in" fonts. I've did everything same as in my other project where everything loaded and linked same, searched in Google, but every result refers to how link and use, so it didn't helped me.
This is how I link font-face CSS
<link href="fonts/unscii-16.woff2" rel="preload" as="font" type="font/woff2" crossorigin/>
<link href="css/unscii.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet"/>
And this is my "unscii.css" file
#font-face {
font-family: 'unscii';
src: url('../fonts/unscii-16.woff2') format('woff2'),
url('../fonts/unscii-16.woff') format('woff'),
url('../fonts/unscii-16.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
I'm using Razor Pages and ASP.NET Core 6, HTML code is located in _Layout.cshtml and works perfectly for all pages, only issue with fonts.
Thanks.
I think this might help. you can remove the '' from URL and format as an OpenType because in my styling it is working that way!
you also can check this article.
https://github.com/whatwg/html/issues/7627
Check this out!
<link href="fonts/unscii-16.woff2?v=4.5.0" rel="preload" as="font" type="font/woff2" crossorigin="anonymous"/>
CSS file
#font-face {
font-family: unscii;
font-style: normal;
font-weight: 100;
url(../fonts/unscii-16.woff2) format('opentype'),
}
#font-face {
font-family: unscii;
font-style: normal;
font-weight: 100;
src: url(../fonts/unscii-16.ttf) format("opentype");
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: Unscii;
}

Custom .woff format fonts in Sendgrid - how to use?

I am trying to figure out how to use custom fonts in Sendgrid. Google fonts work properly, but custom .woff format font doesn´t seem to work. I have tried 3 solutions below. When I use solution nr. 1 in Preview tab it gets applied, but in the email it´s not
Would appreciate any suggestions on the problem.
1.
<head><link href="https://somelink" rel="stylesheet" type="text/css"><style>
* { font-family: 'BrownLight', sans-serif; }
</style></head>
2.
<head>
<style>
#media screen {
font-family: 'BrownLight';
src: url('somelink.woff') format('woff');
}
.text {
font-family: 'BrownLight';
}
</style>
</head>
3.
<head>
<style>
#media screen {
#import url('https://somelink');
}
* { font-family: 'BrownLight', sans-serif; }
</style>
</head>
Twilio SendGrid developer evangelist here.
I assume you have a URL where the WOFF font file itself is hosted. You can then follow what a Google Font would do, like this example.
<head>
<style>
#font-face {
font-family: 'BrownLight';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(YOUR_FONT_URL) format('woff');
}
.text {
font-family: 'BrownLight', sans-serif;
}
</style>
</head>
Though, do note that many clients do not support web fonts. You can see more on adding custom fonts in the SendGrid documentation here.

#font-face and #font-family not working

I am trying to make something really simple: add 3 fonts to an html page.
I have looked at tons of examples but none have solved my problem. Maybe I am lacking something in the way it is written. I am actually not sure.
My html:
<html>
<head>
<title>Fuentes</title>
<link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>
<body>
<p class="a">This is a paragraph, shown in Roboto font.</p>
<p class="b">This is a paragraph, shown in Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>
</body>
</html>
And my .css:
#font-face {
font-family: "Roboto";
src: url(https://fonts.google.com/specimen/Roboto) format("truetype");
}
#font-face {
font-family: "Bellefair";
src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");
}
#font-face {
font-family: "Kavivanar";
src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");
}
p.a {
font-family: "Roboto", Roboto, sans-serif;
}
p.b {
font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
font-family: "Kavivanar", Kavivanar, sans-serif;
}
That's definitely not how to use Google fonts... You're not even linking to an actual font, you're linking to the support page.
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
First go to the page: https://fonts.google.com/specimen/Roboto
Then click this:
Then it will create a little box in the corner. Click that box, and you will see this. Now you have the actual code:
You should add stylesheet link in your html for each google font you want to use. eg
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
for roboto font in your html and then use font-family: 'Roboto', sans-serif;in your css.

How to use a custom font in polymer

I am working on a generic polymer 2.0 login page application, and I'm trying to use a custom font for a title bar.
In my login-page.html, I have this for the custom style:
<custom-style>
<style is="custom-style">
body {
margin: 0;
}
app-toolbar {
background-color: #4F1585;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
#maintitle{
color: red;
font-family: 'font-regular';
}
</style>
</custom-style>
And my header/toolbar:
<app-header fixed condenses effects="waterfall">
<app-toolbar>
<img src="../icons/app-icon.png" style="height:100%;"/>
<div main-title id="maintitle">Login Page</div>
</app-toolbar>
</app-header>
And I import the ttf file like this:
<link rel="stylesheet" href="../fonts/font-regular.ttf" type="css">
This code turns the text red, but it doesn't apply the font. In contrary, it switches to Times new roman. I'm brand new to polymer, is there something I'm missing?
You can use #font-face to import your font.
UPDATE:
You need to use an external document for the #font-face import and not place it in the custom element template. Some at-rules in the shadow root are ignored in Chrome, see discussion. While it's not an issue when using Polymer 1, Polymer 2 seems to follow the browser behavior in this respect.
I would suggest to have a css stylesheet with the #font-face import:
#font-face {
font-family: "font-regular";
src: url("./font-regular.ttf") format("truetype");
}
If you import that in your index.html, "font-regular" will be available globally. Alternatively, you can import the stylesheet only in your custom element.
To import font to polymer use link href then apply the font
example
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">
html, body {
font-family:'Fira Sans', sans-serif;
}
you can also override --paper-font-common-base font
html, body {
font-family:'Fira Sans', sans-serif;
--paper-font-common-base: {font-family:'Fira Sans', sans-serif;}
}

How to add a .ttf font file from web in SASS to be displayed in HAML

#font-face
font-family: MyFont
src: url(https://.../font_name.ttf?raw=true)
$font-main: 'MyFont' , sans-serif
.some_class
font-family: $font-main
When I use MyFont coming from web there is no effect. How to do this properly?
You don't need to add a .ttf, simply include the font #import url at the top in your main .scss file:
#import url('https://fonts.googleapis.com/css?family=Overpass');
Then to use it:
//store it in variable first
$font-main: 'Overpass', sans-serif;
//to use it
.selector {
font-family: $font-main;
}
This would be best for browser compatibility.
If for whatever reason you still want to load a .ttf file, in your sass file at the top set it's name and path:
#font-face {
font-family: 'myFont';
src: url("fonts/myFont.ttf") format("truetype");
}
then use it:
$font-main: 'myFont', sans-serif;
.selector {
font-family: $font-main;
}
Demo Snippet 1 - loading font via conventional CSS:
#import url('https://fonts.googleapis.com/css?family=Overpass');
#import url('https://fonts.googleapis.com/css?family=Overpass');
div {
font-family: 'Overpass', sans-serif;
}
span {
font-family: sans-serif;
}
<div>Overpass font loaded</div>
<span>regular sans-serif</span>
Demo Snippet 2 - loading font via HTML in-between your <head></head> tags:
<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
div {
font-family: 'Overpass', sans-serif;
}
span {
font-family: sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
<div>Overpass font loaded</div>
<span>regular sans-serif</span>
Demonstration font was taken from here