I am sending an email newsletter.
Some how the font Novecentowide-Medium.otf is not getting applied in any heading.
the original font in PSD looks like
When i send a test email it looks like
The html code for font is
<h2 style="font-family: 'novecento_widemedium'; font-weight:400; padding-left:70px;">Transforming<span>Drones</span></h2>
You could connect your opentype font in css:
#font-face
{
font-family: 'Noto Sans', 'Arial';
font-style: normal;
font-weight: 400;
src: url(path/to/font/Novecentowide-Medium.otf) format("opentype");
}
Or use standart format ttf:
#font-face
{
font-family: 'Noto Sans', 'Arial';
font-style: normal;
font-weight: 400;
src: url(path/to/font/Novecentowide-Medium.ttf); /* Pay attention to extension */
}
Related
I am completely new to website design and programming. I have created a website on Mobirise, and am storing it on Github. I am looking to change the font across the website, as I no longer like the one that I had chosen on Mobirise when I exported it to Github.
I have uploaded the font files that I would need to use to the /OpenSansFonts folder in my repository at: https://github.com/SkyBetChampionship/Sky-Bet-Championship/tree/gh-pages.
Would anybody please be able to advise me what to do next to change the font across my website?
Thank you in advance,
Adam
You can create separate *.css file with this code, or add this code in your assets/mobirise/css/mbr-additional.css (if you create separate file, don't forget import this file in your home.html.
#font-face {
font-family: 'OpenSans-Light';
src: url('/OpenSansFonts/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'OpenSans-Light';
src: url('/OpenSansFonts/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-RegularItalic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'OpenSans-Semibold';
src: url('/OpenSansFonts/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'OpenSans-SemiBold';
src: url('/OpenSansFonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
For change font across web site, add to body in assets/mobirise/css/mbr-additional.css font-family property.
body {
font-family: 'OpenSans';
font-weight: 400;
font-style: normal;
line-height: 1.5;
}
For import separate css file with fonts, add in your home.html around 42 string this code:
<link rel="stylesheet" href="your_path_to_file/file_with_fonts.css" type="text/css">
When you want another style of font, use font-family, font-weight and font-style properties.
Feel free ask other questions :) Hope this will help you
This is the code I added in my css style sheet:
#font-face
{
font-family: 'space_rangerregular';
src: url('spaceranger-webfont.woff2') format('woff2'),
url('spaceranger-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I associated this with h6:
h6{
font-size: 12px;
font-family:"Space Ranger Regular", serif;
}
Then in my HTML file (i linked the css sheet ) i did:
<h6>Test</h6>
However my code doesn't display the font. Whats wrong with it?
Use the same value that you assigned to font-family in the #font-face section for font-family where you want to use it. So, for your h6:
h6{
font-size: 12px;
font-family: space_rangerregular, serif;
}
When you use a font-face you set the font-family to name that font. So, in your CSS you need to call that font using the name you enter in font-family. But you need to put that name inside a quotation marks. So:
#font-face{
font-family: 'space_rangerregular'; // Name of your font
src: url('spaceranger-webfont.woff2') format('woff2'),
url('spaceranger-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h6{
font-size: 12px;
font-family: 'space_rangerregular', serif; // Call the SAME name here
}
I recently uploaded my code to bluhost, to create my portfolio website. However, while the fonts were appearing on my computer, they do not display when I load the website (through the host bluehost).
Here is my CSS code. Is the problem trough CSS or bluehost?
#font-face {
font-family: playfair-italic;
src: url(fonts/playfair-display/PlayfairDisplay-Italic.otf);
}
#font-face {
font-family: playfair-regular;
src: url(fonts/playfair-display/PlayfairDisplay-Regular.otf);
}
#font-face {
font-family: playfair-sc;
src: url(fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}
#font-face {
font-family: opensans-regular;
src: url(fonts/open-sans/OpenSans-Regular.ttf);
}
#font-face {
font-family: opensans-semibolditalic;
src: url(fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}
#font-face {
font-family: opensans-semibold;
src: url(fonts/open-sans/OpenSans-Semibold.ttf);
}
Try to add './' before each url to convert them to relative paths.
#font-face {
font-family: playfair-italic;
src: url(./fonts/playfair-display/PlayfairDisplay-Italic.otf);
}
#font-face {
font-family: playfair-regular;
src: url(./fonts/playfair-display/PlayfairDisplay-Regular.otf);
}
#font-face {
font-family: playfair-sc;
src: url(./fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}
#font-face {
font-family: opensans-regular;
src: url(./fonts/open-sans/OpenSans-Regular.ttf);
}
#font-face {
font-family: opensans-semibolditalic;
src: url(./fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}
#font-face {
font-family: opensans-semibold;
src: url(./fonts/open-sans/OpenSans-Semibold.ttf);
}
Since these are both Google Fonts you probably want to use a script tag to pull the font files in from Google's CDN instead of embedding them into the project and serving them from your site.
In the <head> of your HTML file add this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i|Playfair+Display+SC|Playfair+Display:400,400i" rel="stylesheet">
And to use the fonts in your CSS files, use these rules:
font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Playfair Display SC', serif;
//font-weight and font-style will define the rest
font-weight: 400; // This is the regular weight
font-weight: 600; // This is the bold weight
font-style: italic; // The default is regular
How do you reference font from a css file? For example, I have css file with the following structure:
fonts.css file
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
}
How do I use this font in other css files?
Here is an example :
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
}
.mystyle {
font-family: "Open Sans";
font-weight: 700;
font-size: 24px;
}
<p class="mystyle">The quick brown fox jumps over the lazy dog</p>
If your want to use it in another CSS file, on your html page you load first the css containing the font faces declaration, then you load the second css using the first one:
<link rel="stylesheet" href="my_font.css">
<link rel="stylesheet" href="my_other_stylesheet_using_it.css">
That way, in the second css you can use the font faces declared in the first css.
You can also import the css containing the font faces declaration into another:
#import url("base.css");
Look at this: include one CSS file in another
It is known that from the following urls that wkhtmltopdf use only ttf format fonts.
use custom fonts with wkhtmltopdf
Google Web Fonts and PDF generation from HTML with wkhtmltopdf
My website uses only woff, so because of that I am using user-style-sheet to add ttf fonts. I am using many google fonts like Oxygen, Inconsolata, Open Sans, merriweather etc. by using the same font-family name in the user-style-sheet and its rendering correctly.
But the problem is with the fonts 'Open Sans Condensed' and 'sorts mill goudy'. When I am trying to change the font-family name with something else, its properly rendering not exactly with the same name.
I want to use the same names and don't want to change the variable name because I want to use the webfonts and not local fonts.
Second thing is that I don't want to download the fonts to my system and use it but only webfonts.
The way I am using userstylesheet is like this
#font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/829b7e77062a1a06dfc90c29f0f413e2a1de44fe/inconsolata/Inconsolata.ttf') format('truetype');
}
#font-face {
font-family: "sorts mill goudy";
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf') format('truetype');
/*
src: url('https://bienvenidod-fonts.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf') format('truetype');*/
}
#font-face {
font-family: 'Sorts Mill Goudy';
font-style: italic;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Italic.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Light.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Bold.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 400;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLight.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: bold;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondBold.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: italic;
font-weight: 300;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLightItalic.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 400;
font-style: normal;
src:url('http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 700;
font-style: normal;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 700;
font-style: italic;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 800;
font-style: italic;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf') format('truetype');
}
And following is the way I am using the source code in the website
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Droid+Sans+Mono);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic);
#import url(http://fonts.googleapis.com/css?family=Philosopher:400,700,400italic,700italic|Droid+Sans+Mono|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Roboto:400,100,300,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic|EB+Garamond);
#import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
#import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);
#import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700&subset=latin,latin-ext);
#import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic);
#import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
When I am trying to change the font-family name from 'sorts mill goudy' to 'sorts mill goudyy' in the both user-style-sheet and source code..its rendering correctly. What can be problem with the same font-family name?
You can try to use the latest version (0.12) which has support for WOFF fonts.