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
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.
I need to import true type font locally for my webside.
For remote fonts I'm always using
#import url('https://example');
but not sure how to import it from files.
I believe it's very simple but I wasn't able to find and good result.
Thank you
If you don't have a local .ttf font, go to a webfont conversion site, I like this one https://onlinefontconverter.com/
Select the output formats you need, I would recommend selecting .eot , .woff , and svg along with your .ttf for cross browser compatibility.
Then in your scss, use something like this to import all versions of that font for cross browser coverage.
Update: Just using formats woff + woff2 will have you covered for all modern browsers and devices
Don't forget to add fallback fonts just incase.
#mixin font($font-family, $font-file) {
#font-face {
font-family: $font-family;
src: url($font-file+'.eot');
src: url($font-file+'.eot?#iefix') format('embedded-opentype'),
url($font-file+'.woff') format('woff'),
url($font-file+'.ttf') format('truetype'),
url($font-file+'.svg#'+$font-family) format('svg');
font-weight: normal;
font-style: normal;
}
}
#include font('Arvo', '/htdocs/lib/fonts/Arvo');
#include font('Arvo-Bold', '/htdocs/lib/fonts/Arvo-Bold');
h1 {
font-family: Arvo-Bold, Arial-bold, arial, sans-serif;
}
<h1>Hey Look! A headline in Arvo bold!</h1>
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.
Please, looking for a tutorial or explanation that can guide me how to add custom icons to ionic framework. Tried a lot to use custom icons however couldn't understand how the framework make use of the icons in order to use them.
You can add your own icons including custom fonts in your project generated from sites like Icomoon, Fontello or similar.
From these sites you can download a pack with font files (ttf, svg, ...) and relating CSS file. Generally they provide also a demo.html.
It's often necessary to customize the CSS in order to avoid overlapping to Ionicons. For example a CSS could be similar to the following:
#font-face {
font-family: 'myicons';
src:url('../fonts/myicons.eot');
src:url('../fonts/myicons.eot') format('embedded-opentype'),
url('../fonts/myicons.ttf') format('truetype'),
url('../fonts/myicons.woff') format('woff'),
url('../fonts/myicons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-camera:before {
font-family: 'myicons';
content: "\e607";
}
.icon-video-camera:before {
font-family: 'myicons';
content: "\e608";
}
.icon-price-tag:before {
font-family: 'myicons';
content: "\e609";
}
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/>