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/>
Related
I am working on a CodeIgniter project. I need to add a custom font family in CodeIgniter which will be used in over all project. I have downloaded the font files of ttf, eot and wof. I have added these files in the font folder in CodeIgniter then i have updated the style.css file in asset with #font-face. I have declared the font family name for the body and other tags but it's working I'm not sure where did I go wrong.
This is the font face I have added in the style.css file in asset folder.
#font-face {
font-family: 'Poppins';
src: url('../font-awesome/fonts/Poppins-Black.eot');
src: local('../font-awesome/fonts/Poppins Black'), local('Poppins-Black'),
url('../font-awesome/fonts/Poppins-Black.eot?#iefix') format('embedded-opentype'),
url('../font-awesome/fonts/Poppins-Black.woff') format('woff'),
url('../font-awesome/fonts/Poppins-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: normal;
text-align: center;
}
you can create a template.php file to use all over your project then add your style link in there:
<link rel="stylesheet" href=<?php echo base_url('css/style.css'); ?>>
The structure of your project may be like this:
/application
/controllers
/models
/views
/css
/font-awesome
style.css (you should change the urls inside this file base on your structure)
/system
Make sure you load html helper to use base_url function
Another way is using the html helper in here
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.
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.
I am trying to run this html in UIWebView in iPhone. My requirement is that the font size should not change on rotation. And font should be Arial.
when i use css, 32px "font size constant on rotation" problem is solved, but Arial is not solved, it takes times new roman by default. If i Use tag it takes Arial, but does not respect "font size constant on rotation"
<html>
<style type="text/css"> .textprop { font-face: Arial; font-size: 32px;} </style>
<head></head>
<body class="textprop">
<font face="Arial" size="32px">
Email this page<br/>
<b><i>Responsible Sourcing Guidelines</i></b><br/>
</font>
</body>
</html>
2 things you need to do. As ChristianK said, you should move your "style" tag in "head", then in your "style", add -webkit-text-size-adjust: none; and that should do the trick.