Is there a way to use custom fonts in an Apple tvOS TVML based application? I've tried the #font-face at-rule to no avail.
<document>
<head>
<style>
#font-face {
font-family: 'My Awesome Font';
font-weight: 600;
src: url("${this.BASEURL}/resources/fonts/awesome-font-bold.otf");
}
</style>
</head>
...
</document>
It's not possible to set the font-family in tvOS using Apple's provided TVML styles. You can however use the TVElementFactory class to extend upon TVML to create new markup elements.
This article from Shopgate describes the process. They've also put together a repository with a sample project.
Related
I want to add font-family to another language which I'm using in my ionic 4 app. I tried
#font-face {
font-family: 'SINHA Sithumina 2012';
font-style: normal;
font-weight: normal;
src: url('./assets/font/SINHA Sithumina 2012.ttf');
}
and use it in html css class. Can someone help me with this?
#kavindhi
First thing first you should do to convert you .ttf font family into .otf.
https://convertio.co/ttf-otf/
Then add your font's into assets folder.
Then you should add into into global.scss or add custom file like fonts.scss
Then add this into your font file
#font-face {
font-family: "SolitaireMVBPro-Regular";
src: url("assets/fonts/SolitaireMVBPro-Regular.otf");
}
So it'll be available for you into your ionic 4 pages
font-family: SolitaireMVBPro-Regular;
Finally, I have solved the issue by referring https://www.w3.org/International/questions/qa-css-lang.en which mention by #marblewraith.
So basically I have to mention my words in utf and it will convert my fonts.
Before I begin, I'm a designer, not a coder.
I've successfully created an HTML signature with custom hosted fonts using #font-face, however, once I send the email and receive a reply, the font formatting is lost. It defaults back to Arial or whatever.
here's my code, am I doing something wrong?
I've listed the font family name as `sfd'. I can't remember if this is the actual name, or if it's just an alias I created.
<body>
<style type="text/css">
#media screen {
#font-face {
font-family: 'sfd';
src: url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff2') format('woff2'),
url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
You are not doing anything wrong. The font you are using (studiofrontdesk-regular-webfont) is a web fonts, there are only a handful of devices that read/render web fonts. Below is a list for you.
Apple Mail
Outlook for Mac
iOS
Source: List updated 20th September 2021
Only these email clients will show the web fonts and the rest will read the fall back font. Add the fallback fonts (Arial etc) to your font family.
One method I use for my emails is to have the web font and the below code specifically for Outlook.
<!--[if gte mso 9]>
<style>
table, table td{font-family:Arial, Helvetica, 'sans-serif' !important;}
</style>
<![endif]-->
When emails are replied, the fonts that are on the users system or default to Outlook are used.
Your font is not a downloaded font. So once you send it, it is indeed gone. What you could try is downloading the font, place the file inside the directory you are in now. And put the name of the downloaded font inside your source.
Like this:
#font-face {
font-family: fontname;
src: url('fontname.otf');
}
Hope this helped!
Is it possible to import fonts in sendgrid? I've been trying to use #font-face but it doesn't seem to work, but maybe I'm doing something wrong.
Example of the code I used:
#font-face {
font-family: Avenir;
src: url('http://cdn.linktofont.com/font.ttf');
}
We use SendGrid to send some of our emails at StackOverflow, and I can vouch that web fonts work if they are embedded correctly. I use this code:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
<style>
* {font-family: Roboto, sans-serif;}
</style>
I'm not sure how to best embed a premium font like Avenir, and don't know how well the .ttf format is supported in email clients. But referencing a Google font in a manner like this, custom web fonts will work in mail clients that support them using SendGrid.
I had the same issue, and the only way that I have found to make it work using my custom .ttf file was by defining a and using a class. In the Header options add your styles:
#media screen {
#font-face {
font-family: 'MyFont';
src: url('https://some-server/fonts/MyFont.ttf');
format('truetype');
}
}
.title {
font-family: 'MyFont';
}
Then just use that class in your element:
<h1 class="title"> Some fancy title </h1>
And as was said in a comment before, note that it only takes effect in preview mode and not in the design editor.
I want a text use specific font style, I assign its CSS class as ".title" and the related code all are declared in a CSS file within a Confluence plugin as following:
#font-face {
font-family: 'Myriad Pro';
font-style: normal;
src: url(MyriadPro-Regular.otf) format("opentype"), local("Consolas");
}
.title {
font-family: Myriad Pro;
}
But the plugin cannot find the font file. The font file is in the same folder with the CSS file.
What should be the url for the font file?
For Confluence Server, a basic plugin could be defined like so:
With some files in the following structure:
/your-plugin-name/
/your-plugin-name/main
/your-plugin-name/main/java
/your-plugin-name/main/resources
/your-plugin-name/main/resources/atlassian-plugin.xml
/your-plugin-name/main/resources/css/custom.css
/your-plugin-name/main/resources/fonts/MyriadPro-Regular.otf
And an atlassian-plugin.xml like this:
<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}</description>
<version>${project.version}</version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
</plugin-info>
<web-resource key="your-web-resources" name="Web Resources">
<resource name="style.css" type="download" location="css/custom.css" />
<resource name="myriad.otf" type="download" location="fonts/MyriadPro-Regular.otf" />
<!-- Adding main & global contexts means that these web resources will always be loaded. -->
<context>main</context>
<context>global</context>
</web-resource>
</atlassian-plugin>
Your CSS and font files will be available globally throughout Confluence.
Your CSS file will automatically be loaded and be named something like /downloads/gfdsgfdsgf/fdsgfd/me.davidsimpson.confluence.plugins.example:your-web-resources/style.css where gfdsgfdsgf/fdsgfd is some random characters.
You should be able to reference your font files as though they are in the same directory as the css file like so:
#font-face {
font-family: 'Myriad Pro';
font-style: normal;
src: url(myriad.otf) format("opentype"), local("Consolas");
}
.title {
font-family: Myriad Pro;
}
..but note that they have new names - style.css & myriad.otf.
For Confluence Server
If you want something like Consolas to work in Confluence, you'd either need to ensure that the font is installed on all browsers, or use a similar web font such as Inconsolata.
If you're happy that everyone has the correct font installed, add the following to
Confluence Admin | Custom HTML | At the END of the HEAD:
<style> body { font-family: Consolas, monaco, monospace; } </style>
If you decide to use the web font, add the following to
Confluence Admin | Custom HTML | At the END of the HEAD:
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style> body { font-family: Inconsolata, Consolas, monaco, monospace; } </style>
These assume that you want to use the Consolas font stack - where a similar font will be used if the Consolas/Inconsolata font fails to load.
For Confluence Cloud
You cannot edit CSS or add markup to the page, so this is not possible.
I'm working on an iPhone application that use UIWebView which load xhtml files
the html file could include css file that use custom fonts, but it's look like that the web view doesn't support custom fonts since it doesn't render the custom font in the css file
example:
xhtml file:
<head>
<link href="../Styles/p1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="line1">تجريب</p>
</body>
</html>
css file:
#font-face {
font-family: "AHRAM";
font-style: normal;
font-weight: bold;
src:url("../Fonts/andlso.ttf");
}
p.line1 {
font-family: "AHRAM";
}
any suggestion?
thnx in advance :)
Are you adding the font to your info.plist (UIAppFonts key) ?
Here's a tutorial for this process, which shows how to use the font in a UIWebView.
http://tetontech.wordpress.com/2010/09/03/using-custom-fonts-in-your-ios-application/
After Setting up font to info.plist in above mentioned answer. Then copy - Paste the following code in your local html file:
<style>
.heading1{font-family: "GurbaniAkharThick"}
#font-face
{
font-family: 'GurbaniAkharThick';
font-weight: 200;
src: url(GurbaniAkharThick.ttf);
}
</style>
<div style = "font-family: 'GurbaniAkharThick'">AMimRq vyly dw jwp</div><br/>