Alright, common issue - just trying to include a custom font. Ive tried multiple methods, including:
#font-face {
font-family: SequelSansBlackDisp;
src:"./src/resources/SequelSansBlackDisp.ttf";
}
#font-face {
font-family: SequelSansLightDisp;
src:"./src/resources/SequelSansLightDisp.ttf";
}
and
#font-face {
font-family: SequelSansBlackDisp;
src:url("./src/resources/SequelSansBlackDisp.ttf");
}
#font-face {
font-family: SequelSansLightDisp;
src:url("./src/resources/SequelSansLightDisp.ttf");
}
To no avail. The first doesnt do anything, while the 2nd draws "cannot resolve" errors. The font is right there in the resources folder - I did rename the ttf file to take out the spaces. Maybe this is the issue? How would I know how to correctly reference the ttf file?
try this solution:
#font-face {
font-family: fontName;
font-style: normal;
font-weight: normal;
url('/static/fonts/dir/font_name.ttf') format('truetype');
}
You can try this.
#font-face {
font-family: SequelSansBlackDisp;
src:url('./src/resources/SequelSansBlackDisp.ttf') format('truetype');
}
#font-face {
font-family: SequelSansLightDisp;
src: url('./src/resources/SequelSansLightDisp.ttf') format('truetype');
}
Related
I'm working on a pretty bare bones Next app using Tailwind and I just installed a custom variable-weight font Raleway (downloaded the family in .ttf format and converted it to .woff2) but for some reason am unable to change the font weight via the font-bold, font-extrabold, etc custom classes... at least permanently. The Raleway font is successfully showing at all to begin with.
Shown below, a refresh makes the page immediately flash with what's seemingly the correct style but then reverts to something else.
Could it have something to do with the font block period transitioning to the font swap period? Below is my styles/globals.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
#font-face {
font-family: 'Raleway';
src: url('/fonts/Raleway-Thin.woff2') format('woff2');
font-weight: 400;
font-display: swap;
font-style: normal;
}
}
And here's my tailwind.config.js:
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
fontFamily: {
raleway: ['Raleway', 'sans-serif'],
},
},
},
plugins: [],
}
it's because the .ttf file you converted only contains the thin weight (font-weight: 100) of the Raleway font. You need all the weight for this to work.
Example for Poppins :
#font-face {
font-family: 'Poppins';
font-weight: 100;
src: url('../assets/fonts/Poppins/Poppins-Thin.ttf') format('truetype');
}
#font-face {
font-family: 'Poppins';
font-weight: 200;
src: url('../assets/fonts/Poppins/Poppins-ExtraLight.ttf')
format('truetype');
}
#font-face {
font-family: 'Poppins';
font-weight: 300;
src: url('../assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
}
...
The flash you see is the default browser font because of the display swap
I cannot import my font files, dont know why is not working.
Here what I did:
Create font folder and added font-files inside
fonts/avenir.woff
fonts/avenir.woff2
in body setup font-faimily
body {
font-family: Avenir;
// Open-Sans, Helvetica, Sans-Serif;
font-style: normal;
font-size: 14px;
background: ${colors.offWhite};
}
Call the font-face:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=7ba9e0a7-abe8-437c-a682-27fa19a01908");
#font-face{
font-family:"Avenir LT W01_35 Light1475496";
src:url("./fonts/avenir.woff2") format("woff2"),url("./fonts/avenir.woff") format("woff");
}
And still does not work
Where I am making a mistake?
I am having a problem with KendoUI PDF export. I believe the core "Regular" font loads, but the varients don't seem to be there. am I configuring "bold\semibold\etc" wrong?? The docs are REALLY bad explaining this.
As an example "Work Sans" with font-weight: 700; doesn't show up in the pdf, looks just like regular. Clearly it's Work Sans, but nothing is bold.
Simple VSCode Project Sample:
https://www.dropbox.com/s/w25q38w1makog3w/FontProject.zip?dl=0
So here are my font families from the sass
$font-Halant: 'Halant', serif;
$font-IBMPlexSerif: 'IBM Plex Serif', serif;
$font-Lato: 'Lato', sans-serif;
$font-Roboto: 'Roboto', sans-serif;
$font-SourceSansPro: 'Source Sans Pro', sans-serif;
$font-WorkSans: 'Work Sans', sans-serif;
They are all google fonts for the page and the ttfs are saved locally for the kendo export. Everything looks great on the page, all the fonts are there.
This is how I am defining the fonts for export
kendo.pdf.defineFont({
//Halant
"Halant": "fonts/Halant/Halant-Regular.ttf",
"Halant|SemiBold": "fonts/Halant/Halant-SemiBold.ttf",
"Halant|Bold": "fonts/Halant/Halant-Bold.ttf",
"Halant|Medium": "fonts/Halant/Halant-Medium.ttf",
//Roboto
"Roboto": "fonts/Roboto/Roboto-Regular.ttf",
"Roboto|Bold": "fonts/Roboto/Roboto-Bold.ttf",
"Roboto|Medium": "fonts/Roboto/Roboto-Medium.ttf",
//IBM
"IBM Plex Serif": "fonts/IBM_Plex_Serif/IBMPlexSerif-Regular.ttf",
"IBM Plex Serif|Bold": "fonts/IBM_Plex_Serif/IBMPlexSerif-Bold.ttf",
"IBM Plex Serif|Medium": "fonts/IBM_Plex_Serif/IBMPlexSerif-Medium.ttf",
"IBM Plex Serif|SemiBold": "fonts/IBM_Plex_Serif/IBMPlexSerif-SemiBold.ttf",
//Lato
"Lato": "fonts/Lato/Lato-Regular.ttf",
"Lato|Bold": "fonts/Lato/Lato-Bold.ttf",
//Source Sans Pro
"Source Sans Pro": "fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf",
"Source Sans Pro|Bold": "fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf",
"Source Sans Pro|SemiBold": "fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf",
//Work Sans
"Work Sans": "fonts/Work_Sans/WorkSans-Regular.ttf",
"Work Sans|Bold": "fonts/Work_Sans/WorkSans-Bold.ttf",
"Work Sans|Medium": "fonts/Work_Sans/WorkSans-Medium.ttf",
"Work Sans|SemiBold": "fonts/Work_Sans/WorkSans-SemiBold.ttf"
});
Post was answered by Telerik, gonna post this for others. Basically just make new font names, specify the files and it should be good.
Now I still WANT google fonts for the page so on PDF export I apply a .exporting class to body so I'll just hack these font names in for that.
1) Remove the googlefonts link from the index :
<head>
<!-- Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Halant:400,600|IBM+Plex+Serif:400,400i,600,600i,700|Lato|Roboto:400,500,700|Source+Sans+Pro:400,600,700|Work+Sans:400,500,600" rel="stylesheet"> -->
</head>
2) Remove the kendo.pdf.defineFont method from resumes.js:
kendo.pdf.defineFont({...})
3) Use font-face in the resume.css files to load the desired fonts from the local files:
#font-face {
font-family: "Work Sans";
src: url("fonts/Work_Sans/WorkSans-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Work Sans Bold";
src: url("fonts/Work_Sans/WorkSans-Bold.ttf") format("truetype");
}
Notice that the declaration is slightly different for the Bold file. This allows the usage of the font to be changed in the resume.css as follows:
.resume.style2 {
font-family: "Work Sans";
}
.resume.style2 header h3 {
font-size: 16pt;
font-family: "Work Sans Bold";
}
.resume.style2 section h4 {
line-height: 23px;
font-size: 12pt;
letter-spacing: 0.1pt;
font-family: "Work Sans Bold";
}
I am creating a website using the MEEN Stack (Mongo, Ember, Express, Node). And right now, I am trying to import the Lato font family into my project as that will be the font of everything on the website. I seem to be having trouble with this and can't find any resources online that cover this. Any ideas on how to do this? I've downloaded the Lato font and put the files in my public/assets/fonts folder and am still having problems. I am also using foundation if that helps.
I have this in my app.scss file:
/* Webfont: Lato-SemiboldItalic */#font-face {
font-family: 'LatoWebSemibold';
src: url('fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
src: url('fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
url('fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
url('fonts/Lato-SemiboldItalic.ttf') format('truetype');
font-style: italic;
font-weight: normal;
text-rendering: optimizeLegibility;
}
nav {
font-family: "LatoWebSemibold";
background-color: none;
width:150px;
text-align:left;
font-size:1em;
list-style: none;
margin: 0 0 0 0;
padding: 0 20 30 20;
float:left;
}
I think your missing '/assets/' in the url
below is my working example
#font-face {
font-family: 'Mytupi-Bold';
src: url(/assets/fonts/mytupibold.ttf) format('truetype');
}
I was trying to import a local font file into my ember addon.
Sheriffderek posted a nice mixin here but I kept seeing 404 errors.
I eventually got it working by putting the name of the app at the beginning of the font URL.
$font-url: '/<app/addon-name>/fonts';
#mixin font-face($name) {
#font-face {
font-family: $name;
src: url("#{$font-url}/#{$name}.woff2") format("woff2"),
url("#{$font-url}/#{$name}.woff") format("woff");
}
#include font-face('font-name-500');
body {
font-family: 'font-name-500';
}
I'm currently building a canvas game in JavaScript and jQuery. For the statusbar I wanted to use a custom font, named "pixelart.ttf". In index.html I added the following:
<style type="text/css">
#font-face {
font-family: pixelart;
src: url(misc/pixelart.ttf);
}
</style>
It is before all scripts are loaded. The canvas is also on this page.
This is the code that should draw the statusbar with the font:
context.fillStyle = 'rgba(25, 25, 25, 0.1)';
context.textBaseline = 'top';
context.font = fontSize + ' ' + fontName; // will become '25px pixelart'
context.fillText(currentText, 50, 50);
In Safari on both Mac and iPhone the font works, on all other browsers it does not.
When I look at the loaded resources in Chrome or Firefox the font is there, but it shows another default font.
I tried some things. For example adding this at the top of the body:
<div style"font-family: pixelart"></div>
But this also doesn't work.
Any suggestions?
In addition to .ttf you need to have your font in .eot .woff2 .woff to make it work.
css example:
#font-face {
font-family: 'yourFONT';
src: url(/yourFont.eot');
src: url('/yourFont.eot?#iefix') format('embedded-opentype'),
url('/yourFont.woff2') format('woff2'),
url('/yourFont.woff') format('woff'),
url('/yourFont.ttf') format('truetype'),
url('/yourFont.svg#yourFONT') format('svg');
font-weight: normal;
font-style: normal;
}