Custom font on canvas only working for safari - javascript

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;
}

Related

Font in Next.js / Tailwind CSS app initially bold but then unintentionally reverts

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

How to import font family files properly react

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?

CSS - Can't resolve local ttf file?

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');
}

How to import a font into an Ember project

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';
}

How to use the "Helvetica Neue Bold Condensed" in the HTML5 Canvas

So the question is, how can I use "Helvetica Neue Bold Condensed" in the HTML5 Canvas.
I've tried:
context.font = "20pt 'HelveticaNeue-BoldCondensed'";
context.font = "20pt 'HelveticaNeue-CondensedBold'";
context.font = "20pt 'Helvetica Neue Bold Condensed'";
none of them work.
There's a couple of different things that could be wrong:
Are you including the web-font (if you aren't assuming it's on your own computer)? You can double-check this by setting the font-family to another, plain HTML element and see it if works.
Do you have the proper files in the correct format for your browser/version?
You're not calling it by it's "actual" font family name. Sometimes these can be bizarre, so you may need to check with a font viewer or an online service.
Ol' man Miedinger is haunting you because you're stealing his greatest work.
I would encourage you not to use fonts that you do not have a legal license to use as web fonts. :) Google and other vendors have a lot of good, free stuff out there. Use that.
It apparently doesn't matter if you omit the font-weight or font-style, although you need to make sure and match the font-weight and font-styles in your #font-face definition(s).
However, bizarrely you can end up with some strange results:
context.font = '40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();
context.font = 'normal Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();
http://jsfiddle.net/userdude/tceh5/1/
You would think it still had enough to work with, but this gives:
Leading me to believe you need to be careful and probably be as descriptive as possible. It can apparently use 40pt Rye, while normal Griffy just gets ignored for the default 10px Sans-Serif.
HTML
<canvas id="mycanvas" width="400" height="300"></canvas>​
CSS
#font-face {
font-family: 'Griffy';
font-style: normal;
font-weight: 400;
src: local('Griffy'),
local('Griffy-Regular'),
url(http://themes.googleusercontent.com/static/fonts/griffy/v1/f4FUXlL5FPqftKJ2T0mqXg.woff) format('woff');
}
#font-face {
font-family: 'Rye';
font-style: normal;
font-weight: 400;
src: local('Rye Regular'),
local('Rye-Regular'),
url(http://themes.googleusercontent.com/static/fonts/rye/v1/o1b_1mvE63vyDpMCbEPL_A.woff) format('woff');
}
#font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: local('Jolly Lodger'),
local('JollyLodger'),
url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}​
Javascript
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.font = 'normal 40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();
context.font = 'normal 40px Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();
context.font = 'normal 40px "Jolly Lodger"';
context.fillText("StackOverflow", 20, 150);
context.fill();​
http://jsfiddle.net/userdude/tceh5/

Categories

Resources