This example shows how to change the Article Editor CSS to your custom styles.
<!DOCTYPE html>
<html>
<head>
<title>Article Editor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-folder/article-editor.min.css" />
<!-- custom css -->
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i&display=swap" rel="stylesheet">
<style>
.arx-content {
padding: 40px;
}
.arx-content p,
.arx-content div,
.arx-content h1,
.arx-content h2,
.arx-content h3,
.arx-content h4,
.arx-content h5,
.arx-content h5,
.arx-content ol,
.arx-content ul {
font-family: 'PT Serif', serif;
font-size: 18px;
line-height: 1.555;
}
.arx-content h1 {
font-size: 40px;
line-height: 1.25;
}
.arx-content h2 {
font-size: 24px;
line-height: 1.4;
}
</style>
</head>
<body>
<!-- element -->
<textarea id="entry">
<p>Content</p>
</textarea>
<!-- js -->
<script src="/your-folder/article-editor.min.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry');
</script>
</body>
</html>