How to add fonts to Flatsome? Using font-face
Already have a website, but the interface looks great yet comes with an ugly font paired with a fancy theme that just feels off? Want to switch to a different font to make your site look more elegant? Read this article. Basically, this guide will show you how to use font-face for your WordPress website or any other source code, without needing any plugins at all. Pretty awesome. If you want to find beautiful fonts, check out this article too.24 font designSuper cool and stylish.
Got it, leave it there for now. Next, go to your theme's CSS editing section (every theme has one; if you can't find it, message me and I'll help you personally). Paste the code snippet above, then update the file paths to match your website (the files you uploaded in step 3).
Navigation font:
Heading font:
Alt font:
Save, clear cache and reload the page. Well done! That's all set. Leave your email to receive notifications whenever we have new articles!
Step 1. Choose an appropriate font:
Find some beautiful fonts that support Southeast Asian languages, because a Southeast Asian language website without proper diacritics is just a waste. This article uses Open Sans as an example. Download and save it somewhere you can find it.B2. Convert font
Since the font you downloaded is a Windows font, you can't use it directly on your website. You need to convert it. Upload your chosen font to one of these sites: Then set up the parameters for your font. You don't need to worry about this part, just go ahead and click convert. Wait a moment and download the file.Step 3. Upload the font-face you just created to your hosting
The file you downloaded in the previous step contains a bunch of files. Extract it and upload it to a folder on your hosting. Upload the entire folder.B4. edit css
Open the CSS file from the extracted files. Inside, you'll find a code snippet that looks like this:|
1
2
3
4
5
6
7
8
9
10
|
@font-face {
font-family: 'open-sans';
src: url('open-sans.eot');
src: url('open-sans.eot?#iefix') format('embedded-opentype'),
url('open-sans.woff') format('woff'),
url('open-sans.ttf') format('truetype'),
url('open-sans.svg#Sri-TSCRegular') format('svg');
font-weight: normal;
font-style: normal;
}
|
AND IF YOU USEFLATSOME THEMETHEN ADD THESE SECTIONS BELOW:
Base font:|
1
|
body{font-family: "open-sans", sans-serif}
|
|
1
|
.nav > li > a {font-family: "open-sans", sans-serif;}
|
|
1
|
h1,h2,h3,h4,h5,h6, .heading-font{font-family: "open-sans", sans-serif;}
|
|
1
|
.alt-font{font-family: "open-sans", sans-serif;}
|
