Created a website on wordpress and added a plugin 'Superfly Menu'. It allows custom css so I added the below code to use a custom font but it does not work on mobile.
#font-face {
font-family: 'Town10Display-Bold';
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.ttf') format('ttf');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.woff') format('woff');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.woff2') format('woff2');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.eot') format('eot');
}
.sfm-va-middle {
font-family: "Town10Display-Bold";
}
I even tried using media queries...
#media only screen and (min-width: 768px) {
#font-face {
font-family: 'Town10Display-Bold';
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.ttf') format('ttf');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.woff') format('woff');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.woff2') format('woff2');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.eot') format('eot');
}
.sfm-va-middle {
font-family: 'Town10Display-Bold';
}
the link for the website is www.ambrosekoffee.co.uk
Thanks in advance
Related
I am new at learning HTML5 and CSS. Advanced apology for this very basic question.
I have downloaded a font and saved it in a folder called fonts in my project.
Then created a fonts.css file inside of css folder and put the following code in it.
#font-face {
font-family: 'FiraCode-Regular';
font-weight: normal;
font-style: normal;
src: url('../fonts/FiraCode-Regular.eot');
src: url('../fonts/FiraCode-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/FiraCode-Regular.woff2') format('woff2'),
url('../fonts/FiraCode-Regular.woff') format('woff'),
url('../fonts/FiraCode-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'FireCoda-Light';
font-weight:normal;
font-style: normal;
src: url('../fonts/FireCoda-Light.eot');
src: url('../fonts/FireCoda-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/FireCoda-Light.woff2') format('woff2'),
url('../fonts/FireCoda-Light.woff') format('woff'),
url('../fonts/FireCoda-Light.ttf') format('truetype');
}
Then in the main.css file I added the following css:
body{
font-family:"FiraCode-Regular",Verdana, sans-serif;
font-size: 1.2rem;
}
here is an screen shot of the file hierarchy in my project
now the problem is the font is not working. I would appreciate if anyone can help me here.
add
#import url("./fonts.css");
in your main.css as the first line.
I have a small static website and I need to move it on an USB to make it possible to open it via this USB.
Via CSS I defined those rules for the fonts (Is a custom font):
#font-face {
font-family: 'MyFont_SerifReg';
src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype');
src: url('/assets/fonts/MyFontSerifReg.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/MyFontSerifReg.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('/assets/fonts/MyFontSerifReg.woff') format('woff'); /* Pretty Modern Browsers */
}
#font-face {
font-family: 'MyFont_SansBol';
src: url('/assets/fonts/MyFontSansBol.ttf') format('truetype');
src: url('/assets/fonts/MyFontSansBol.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/MyFontSansBol.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('/assets/fonts/MyFontSansBol.woff') format('woff'); /* Pretty Modern Browsers */
}
#font-face {
font-family: 'MyFont_SansLig';
src: url('/assets/fonts/MyFontSansLig.ttf') format('truetype');
src: url('/assets/fonts/MyFontSansLig.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/MyFontSansLig.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('/assets/fonts/MyFontSansLig.woff') format('woff'); /* Pretty Modern Browsers */
}
#font-face {
font-family: 'MyFont_SansDem';
src: url('/assets/fonts/MyFontSansDem.ttf') format('truetype');
src: url('/assets/fonts/MyFontSansDem.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/MyFontSansDem.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('/assets/fonts/MyFontSansDem.woff') format('woff'); /* Pretty Modern Browsers */
}
body {
font-family: 'MyFont_SansLig';
}
h2 {
font-family: 'MyFont_SerifReg';
font-size: 40px !important;
}
h4 {
font-family: 'MyFont_SansBol';
line-height:1.5em;
}
p {
font-family: 'MyFont_SansLig';
font-size:16px;
}
b {
font-family: 'MyFont_SerifReg';
font-size:18px;
}
And I have no problem to load the fonts while visiting the website via We
EDIT:
A screen from the Console, Looks like the "fonts" folder is not loaded in "Sources"
Console
The problem appears only when I try to load the website in Local: the font's are not loaded.
What am I writing wrong?
It might be because the path problem.
Try to use relative path (assume the assets folder is at the same place as the html): ../assets/fonts/MyFontSerifReg.ttf
#font-face {
font-family: 'MyFont_SerifReg';
src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype'),
url('/assets/fonts/MyFontSerifReg.woff') format('woff');
}
Please make sure to cross-check below trouble shooting guide:
path provided in url()
Apply Style as below for example:
body{
font-family: 'MyFont_SerifReg'; // Same name defined in rule
}
Add reference of your CSS file where rules are defined in HTML.
I am trying to use the SegoePrint font on my rails app. I have in app/assets/fonts both files
SegoePrint.ttf
SegoePrint.eot
In my stylesheets if I have
#font-face {
font-family: "SegoePrint";
src: url(SegoePrint.ttf) format("truetype");
}
It works only for firefox, not for IE but if I have
#font-face {
font-family: "SegoePrint";
src: url(SegoePrint.ttf) format("truetype");
src: url(SegoePrint.eot);
src: url(SegoePrint.eot?#iefix) format("embedded-opentype");
}
I works only for IE and not for firefox anymore. What is the right syntax to have it work for both browsers please? Thanks.
how about if you using this syntax below
#font-face {
font-family: 'SegoePrint';
src: asset-url('SegoePrint.eot');
src: asset-url('SegoePrint.eot') format('embedded-opentype'),
asset-url('SegoePrint.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I would like to set a custom font using SASS.
I was able to do that when I was using the default configuration with style.css file but when I try to run the same code on ionic.app.scss it doesn't work.
//style.css
#font-face {
font-family: 'Bariol_Regular';
src: url('../lib/ionic/fonts/Bariol_Regular.eot');
src: url('../lib/ionic/fonts/Bariol_Regular.eot') format('embedded-opentype'),
url('../lib/ionic/fonts/Bariol_Regular.woff2') format('woff2'),
url('../lib/ionic/fonts/Bariol_Regular.woff') format('woff'),
url('../lib/ionic/fonts/Bariol_Regular.ttf') format('truetype'),
url('../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular') format('svg');
}
.login_title {
font-family: "Bariol_Regular";
text-align: center;
}
//ionic.app.scss
$ionicons-font-path: "../lib/ionic/fonts" !default;
//Common
#font-face {
font-family: 'Bariol_Regular';
src: url("../lib/ionic/fonts/Bariol_Regular.eot");
src: url("../lib/ionic/fonts/Bariol_Regular.eot") format('embedded-opentype'),
url("../lib/ionic/fonts/Bariol_Regular.woff2") format('woff2'),
url("../lib/ionic/fonts/Bariol_Regular.woff") format('woff'),
url("../lib/ionic/fonts/Bariol_Regular.ttf") format('truetype'),
url("../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular") format('svg');
font-weight: normal;
font-style: normal;
}
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
.login_title {
font-family: "Bariol_Regular";
text-align: center;
}
The scss get compiled correctly, but then the font of the login-title class doesn't display the right font, but just the ionic default font.
Whats happening is your CSS is being called AFTER the Ionic styles, and they are getting priority over your change.
Place your .login_title, and all future style changes, ABOVE the Ionic #import
I want to change the font in my application to a custom font but the following code is not working:
#font-face
{
font-family: "ArnoProBold";
src: url("resources/fonts/ArnoProBold.ttf");
}
#font-face
{
font-family: "ArnoProCaption";
src: url("resources/fonts/ArnoProCaption.ttf");
}
#font-face
{
font-family: "Arn";
src: url("resources/fonts/ArnoProLightDisplay.ttf");
}
Hey #Ritesh please try something like this,
#font-face {
font-family: 'ArnoProBold';
src: url('resources/fonts/your_file.eot');
src: url('resources/fonts/fonts?#iefix') format('embedded-opentype'),
url('resources/fonts/your_file.woff') format('woff'),
url('resources/fonts/your_file.ttf') format('truetype'),
url('resources/fonts/your_file.svg#ArnoProBold') format('svg');
font-weight: normal;
font-style: normal;
}
and so on.
I hope this helps. :)